为何CSS中margin的像素值与百分比值呈现不同效果？

问题场景 #

初始实现 #

HTML代码：

<div id="mydiv"></div>

CSS代码：

body {
    margin: 0;
}

#mydiv {
    width: 500px;
    height: 300px;
    border: 1px solid red;
    margin: 10px;
}

此时元素外边距为10px，呈现对应效果。

修改后表现 #

把#mydiv的margin属性改成margin: 2%;，CSS代码变为：

#mydiv {
    width: 500px;
    height: 300px;
    border: 1px solid red;
    margin: 2%;
}

这时元素的边距明显变大，和预期中「500px的2%=10px」的效果完全不符。

问题原因 #

你对margin百分比的计算基准理解错了——margin的百分比值从来不是基于元素自身宽度，而是基于它的包含块（containing block）的宽度。

对于这个未嵌套的#mydiv来说，它的包含块是「初始包含块」，也就是浏览器的视口宽度（不含滚动条）。比如你的浏览器窗口宽度是1200px，那2%的margin就是24px，自然比10px的边距大很多。

CSS规范里明确规定：不管是上下方向还是左右方向的margin，百分比值都是以包含块的宽度为计算基准，这是很多前端开发者容易踩的坑。

所以你之前误以为是按自身宽度计算，实际上是按视口宽度算的，这就是表现不一致的原因。

内容的提问来源于stack exchange，提问作者Sachin