5

我一直认为 CSS 边距背后的基本理论非常简单。一个边距为 10px 的 div 将在该元素周围创建一个 10px 的缓冲。当两个 div 并排放置时，两者都有 10px 的边距，导致 div 相距 20px；两个元素都有 10px 的边距，导致元素之间的距离为 20px。这似乎是正确的，也是我一直相信的事实。

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

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

请有人澄清一下，这样我就可以把它放在床上继续我的晚上:)

4

3 回答 3

1

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

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

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

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

于 2012-07-26T19:14:34.240 回答
1

看起来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

于 2012-07-26T19:14:46.450 回答
1

看来您自己找到了答案：折叠边距是CSS2.1 推荐和CSS3 工作草案的一部分。后者取决于block-progression，默认情况下为'tb'(top -> bottom)。这将导致仅顶部/底部边距折叠。为了折叠左边距/右边距，必须使用block-progression:lror block-progression:rl：

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

不幸block-progression的是，它不在最新的工作草案中，并且不太可能被任何浏览器实现。CSS3 box 模块自 2007 年以来就没有更新过，所以不清楚什么时候你会得到一个明确的答案。

于 2012-07-26T19:26:20.297 回答