当这个聪明的规则可以帮助时,就无法弄清这种情况。它们打破了箱子模型的简单性,并且在将不同的布局组合在一起时提供了无限的麻烦来源。那么原因是什么呢?
Rules作参考。
更新:规则对于兄弟元素是相当合乎逻辑的,但为什么边距应该传播到父元素直到树?解决什么样的问题?
例如:
<div style="margin: 20px; background-color: red;"> <div style="margin: 20px;"> <p style="margin: 100px;">red</p> </div> </div> <div style="margin: 20px; background-color: blue;">blue</div>
顶级div彼此间隔100像素。
解决方法
这是在您意识到替代品不那么有意义的情况下才真正有意义的情况之一。
您可能知道,边距指定元素之间的距离,它不是围绕每个元素的“外部填充”。如果两个边距为20px的元素相邻,则它们之间的距离为20px,而不是40px。
由于边距是与另一元素的距离,因此距离是从元素到周围的元素,而不是父元素的边界是有意义的。
如果边距将被计入父元素的边界,则将元素放在div元素中会在元素之间引入额外的间距,即div本身没有边距或填充。如果您在其周围添加一个未分区的div,则元素周围的边距应保持不变。