为什么在CSS中引入了margin margin规则？ [英] For what reason margin collapse rules were introduced in CSS?

问题描述

只是不能弄清楚这个聪明的规则可以是有帮助的情况。它们打破了盒子模型的简单性，并且当您将不同的布局组合在一起时提供了无限的麻烦来源。那么究竟是什么原因呢？

Just can't figure out the situation when this clever set of rules can be helpful. They break the simplicity of the box model and provide infinite source of troubles when you combine different pieces of layout together. So what is the reason?

的规则，在参考

更新：规则是兄弟元素很符合逻辑，但为什么要利润传播到父元素到树？

Update: Rules are quite logical for sibling elements, but why margins should propagate to parent elements up to the tree? What kind of problems that solves?

例如：

<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像素。

Top level divs are spaced from each other by 100px.

推荐答案

这是它并没有真正意义，直到你意识到替代品做那么多意义上的情形之一。

This is one of the situations where it doesn't really make sense until you realise that the alternatives make less sense.

你可能知道，边距指定元素之间的距离，它不是围绕每个元素的外部填充。如果两个边距为20像素的元素彼此相邻，则它们之间的距离为20像素，而不是40像素。

As you probably know, margins specify the distance between elements, it's not an "outer padding" that surrounds each element. If two elements with the margin 20px are next to each other, the distance between them is 20px, not 40px.

由于边距是到另一个元素的距离，意味着距离是从元素到周围元素，而不是父元素的边界。

As the margin is a distance to another element, it makes sense that the distance is from the element to the surrounding elements, not to the boundary of the parent element.

如果边距将被计数到父元素的边界，这种元件在 DIV 元素将引入eventhough元素之间的额外间距 DIV 本身没有保证金或填充。如果在其周围添加未经修饰的 div ，元素周围的边距应保持不变。

If the margin would be counted to the boundary of the parent element, putting elements in a div element would introduce extra spacing between the elements eventhough the div itself has no margin or padding. The margins around an element should remain the same if you add an unstyled div around it.

这篇关于为什么在CSS中引入了margin margin规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！