CSS内外边距属性使用百分

马黑黑 · 发表于 2026-3-14 12:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

根据最新的 CSS 规范，百分比外边距（margin）和内边距（padding）的计算取决于书写模式（writing-mode）：

🔷 在水平书写模式（如默认的 horizontal-tb）下，所有方向的百分比边距都相对于包含块的宽度。

🔷 在垂直书写模式（如 vertical-rl）下，所有方向的百分比边距都相对于包含块的高度。

参考如下例子可能可以帮助理解 margin-*、padding-* 值取百分比时其值与容器元素宽高的关系：

<style>
	.pa {
		margin: 1.5rem auto;
		position: relative;
		width: 400px;
		height: 200px;
		background: #eee;
		border: 1px solid gray;
	}
	.son {
		margin-top: 25%;
		margin-left: 50%;
		width: 100px;
		height: 100px;
		background: #ccc;
	}
</style>

<div class="pa">
    <span style="position: absolute; top: 10px; right: 10px;">心之所向</span>
	<div class="son"></div>
</div>

容器 pa 固定宽高 400*200。默认书写模式下，子元素 son 的外边距均以父元素宽度做参照：上外边距设为 25%，是取容器宽度 400 的四分之一即 100px，son 的顶端距容器 pa 的顶部 100px；左边距设为 50%，取的也是容器宽度 400 的一半即 200px，son 的左端距容器 pa 的左端 200px。改变书写模式为垂直方向，则子元素 son 的外边距均以父容器的高度做参照：25% 的上边距取 pa 的高度 200 的四分之一即 50px，50% 的左边距取 pa 高度 200 的一半即 100px。

若容器内的子元素 padding-* 也取百分比值，百分比所参照的同样是依据书写模式而取父元素即其所在的容器元素的宽或高。padding 是内边距，指其里面的内容和其边框的距离。内边距百分比值也有应用场景，常见的用法是占位，例如像这样：

<style>
	.ma {
		margin: 1.5rem auto;
		width: 400px;
		background: #eee;
		border: 1px solid gray;
	}
	.ma::before {
		display: block; /* 设为块级元素以占位 */
		content: '::before'; /* 演示用，content值可为空 */
		padding-bottom: 50%; /* padding-top 也可以 */
	}
</style>

<div class="ma"></div>

.ma 没有设置高度，我们是希望将来通过其内的内容决定其高度，同时又希望 ma 元素占据一定的纵向空间，所以通过其伪元素 ::before 的 padding: 50%; 占位，50% 用的是 ma 的宽度。这里，ma 元素的相关设置可能的场景是保障页面布局的固定性以避免页面加载时“闪烁”，将来里面内容的高度一般也是设置为 ma 现有的高度，该高度在其内内容（例如图片）加载前就已由其 ::before 伪元素撑开，为后续的内容做好空间准备。

💫 margin-* 和 padding-* 的百分比赋值可能是个冷门知识，但有其特殊的应用场景，占位、定位是较常见的用途。其核心是：*-top/bottom 的百分比取值参照容器元素的宽度、*-left/right 的百分比取值参照容器元素的高度。