// 2007年3月15日

POSTED ON // BY s5s5 // IN Other // - 评论

x 方向 margin（以及border,padding,width等），有一套详细的规则。
y 方向普通 block 元素要稍微简单一点，基本是根据内容定。

首先 x 方向， margin+border+padding+width = containing block

这个还要分 inline 元素，block 元素和定位元素几种情况来看呢。

如果你说的是 block 元素，首先它要有一个 containing block.

这个宽度是固定的，如果你同时设定了 marign-left 和 margin-right 以及 width ，在从左到右的语序中，右边 margin 会被忽略。

它设定的值会被忽略，而根据上面的公式重新计算。

比如 containing block 100px,
margin:0 50px; width:80px;
最后实际的 margin-right 不是 50 而是 100-50-80 = -30 px

最好还是看 css spec 的 visual formatting model 部分

margin表示一个距离，距离是没有参考线的。

containing blocks
http://www.w3.org/TR/CSS21/visuren.html#containing-block

margin-bottom 应该表示 border-bottom 边缘位于 containing block 下边缘时候的取值。

米随随 书于北京