一个简单的 CSS 边距问题

Question

我一直认为 CSS 边距背后的基本理论非常简单。一个边距为 10px 的 div 将在该元素周围创建一个 10px 的缓冲。当两个 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 box 模块自 2007 年以来就没有更新过，所以不清楚什么时候能得到明确的答复。