html - 我如何同时 (1) 防止 占用所有可用宽度，以及 (2) 使其与相邻元素折叠边距？

Question

有可能有一个<div>吗？同时 (1) 不占用所有可用宽度和 (2) 与其邻居折叠边距？

我最近了解到设置 div至 display:table将阻止它扩展到占据父容器的整个宽度——但现在我意识到这引入了一个新问题:它停止与它的邻居折叠边距。

在下面的示例中，红色 div 无法折叠，蓝色 div 太宽。

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>

<div style="margin: 100px; border: solid red 2px; display: table;">
  This is a div with 100px margin all around and display:table.
  <br/>
  The problem is that it doesn't collapse margins with its neighbors.
</div>

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>

<div style="margin: 100px; border: solid blue 2px; display: block;">
  This is a div with 100px margin all around and display:block.
  <br/>
  The problem is that it expands to take up all available width.
</div>

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>

有没有办法同时满足这两个条件？

Answer 1

您可以用另一个 div 包装 display: table div 并将边距放在包装器 div 上反而。讨厌，但它有效。

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>

<div style="margin: 100px"><div style="border: solid red 2px; display: table;">
  This is a div which had 100px margin all around and display:table, but the margin was moved to a wrapper div.
  <br/>
  The problem was that it didn't collapse margins with its neighbors.
</div></div>

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>

<div style="margin: 100px; border: solid blue 2px; display: block;">
  This is a div with 100px margin all around and display:block.
  <br/>
  The problem is that it expands to take up all available width.
</div>

<p style="margin:100px">This is a paragraph with 100px margin all around.</p>