FK

CSS margin 百分比

假设一个块级包含容器,宽 1000px,高 600px,块级子元素定义 margin:10% 5%; 大家说说 margin 的 top, right, bottom, left 计算值最终是多少?

CSS 代码:

#demo{
    width: 1000px;
    height: 600px;
}
#demo p{
    margin: 10% 5%;
}

HTML 代码:

<div id="demo">
    <p>恩,注意看我所在的位置。</p>
</div>

结果为:100px 50px 100px 50px

为什么会这样?

诧异吗?不用怀疑浏览器出了问题,因为这是正确的实现。

规范中注明 margin 的百分比值参照其包含块的宽度进行计算。但这只发生在默认的 writing-mode: horizontal-tb;direction: ltr; 的情况下。

当书写模式变成纵向的时候,其参照将会变成包含块的高度。我们改变一下上面例子中的 CSS 书写模式:

CSS 代码:

#demo{
    -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
    writing-mode: tb-rl; /* for ie */
}

这时的结果为:60px 30px 60px 30px

也就是说书写模式影响 margin 百分比的参照对象。

顺带再说说

你是否觉得这不符合常规的感性认知?感性认知更多感觉应该横向参照包含块宽度,纵向参照包含块高度。

其实这是为了要横向和纵向2个方向都创建相同的 margin,如果它们的参照物不一致,那就无法得到两个方向相同的留白。

你可能会问那为什么要选择宽度做参照而不是高度呢?

这其实更多的要从 CSS 设计意图上去想,因为CSS的基础需求是排版,而通常我们所见的横排文字,其水平宽度一定(仔细回想一下,如果没有显式的定义宽度或者强制一行显示,都会遇到边界换行,而不是水平延展),垂直方向可以无限延展。但当书写模式为纵向时,其参照就变成了高度而不再是宽度了。