Question

我一直认为css边缘背后的基础理论非常简单。边距为10px的div将围绕该元素创建10px缓冲。当两个div并排放置时，两个div都有10px的余量，导致div间隔20px;两个元素的边距均为10px，因此元素之间的距离为20px。这似乎是正确的，而且我一直认为这是事实。

但是，我最近发现，如果不是两个div并排放置，而是将一个放在另一个之下，那么两个元素之间的边距现在只有10px。其他div给出的10px保证金发生了什么变化？为什么并排和垂直堆叠之间没有一致性？

边距基本上是“不要把任何东西放在我的x像素内”。通过“任何东西”，这是否包括其他元素的边缘？在并排的情况下，答案似乎是肯定的，边缘表示“不要在我的x像素内放置任何东西，包括你自己的边距”。在纵向的情况下，似乎允许后者？

请有人澄清，以便我可以把它放到床上并继续我的晚上：）

Answer 1

它与inline或inline-block何时更改其属性以使它们彼此堆叠而不会将边距折叠在一起（这是正常的，但不直观的行为）。

http://jsfiddle.net/xeCZJ/3/

边距处于默认display:block属性时会崩溃。您可以使用inline-block使其按预期运行，但您必须使用br或包含元素的宽度手动控制换行符。

或者您可以使用填充而不是边距。

Answer 2

看起来display:inline忽略了所有上/下边距，display:block允许边距折叠，display:inline-block将它们加在一起以获得巨大的余量。例如，查看此jsFiddle：http://jsfiddle.net/Z2nUN/4/

<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>

<hr />
<div class="allBlock">
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
</div>

<hr />
<div class="allInlineBlock">
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
<p>Some content</p>
<p>some more content</p>
<p class="wideMargin">some more extra content</p>
<p class="narrowMargin">less extra content</p>
</div>


p{ margin:10px; background:#ccc; display:inline;}
.wideMargin{ margin:30px;}
.narrowMargin{ 0px; }
.allBlock p{ display:block;}
.allInlineBlock p{ display:inline-block;}

从未注意到这一点。今天我学到了，我猜。

编辑：添加了display：block和inline-block

Answer 3

您似乎自己找到了答案：折叠边距是CSS2.1 recommendation和CSS3 working draft的一部分。后者取决于block-progression，默认情况下为'tb'（顶部 - >底部）。这将导致只有顶部/底部边距崩溃。要折叠左/右边距，必须使用block-progression:lr或block-progression:rl：

如果边距相邻且B为'rl'或'lr'，方框A的左边距会与其父框B的左边缘折叠。

如果边距相邻且B为'rl'或'lr'，则框A的右边距与其父框B的右边缘折叠。

不幸的是block-progression不在newest working draft中，并且不太可能被任何浏览器实现。 CSS3盒子模块自2007年以来一直没有更新，因此不清楚何时能得到明确答案。

CSS边距的快速简单问题

3 个答案: