Как мне одновременно (1) удержать <div>от захвата всей доступной ширины и (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

Вы можете обернуть display: table div другим 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>

Answer 2

Я, вероятно, просто поместил бы div (чтобы он не занимал доступную ширину), а затем очистил бы float впоследствии, если это необходимо.

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

<div style="border: solid red 2px; float: left;">
  This should work.
</div>

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