CSS边距冲突

【问题标题】：css margin collisionCSS边距冲突
【发布时间】：2011-03-01 00:40:40
【问题描述】：

有没有办法检测边缘冲突并防止它发生？就像我有

<div style="margin-bottom: 10px;"></div>
<div style="margin-top: 10px;"></div>

它们之间有 20px 的空间，但我需要 10px 的空间？

【问题讨论】：

标签： css margin

【解决方案1】：

你不需要做任何事情；根据盒子模型规格，相邻的底部和顶部边距将 collapse，因此您的两个 <div> 元素之间有 10 像素的间隙，而不是 20 像素的间隙。见this jsFiddle preview。

编辑：您没有看到 <table> 和 <div> 之间的崩溃的原因是因为默认情况下将表设置为 display: table，这不完全是与块级元素相同，因此按照规范，边距不会折叠。

【讨论】：

+1 用于链接规范。 @Guy，它通常被称为margin-collapse。
问题是当我设置显示：块时，我遇到了列宽问题。它们不再以 100% 的宽度工作。我可以在不需要将其设置为显示的表格上应用的任何技巧：阻止？然而，我还有另一个问题，因为当我在两个元素之间有东西时，边距冲突不起作用，例如：