Почему маркер <table> не сжимается со смежным <p>?

Из моего понимания спецификации CSS таблица выше или ниже абзаца должна сворачивать с ней вертикальные поля. Однако это не происходит здесь:

table {
  margin: 100px;
  border: solid red 2px;
}
p {
  margin: 100px
}

<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

<p>This is a paragraph with 100px margin all around.</p>

Ответы

Ответ 1

Коллапс маржи определяется только для элементов блока. Попробуйте - добавьте display: block к стилям таблицы, и внезапно он работает (и изменяет отображение таблицы...)

Таблицы являются специальными. В спецификациях CSS они не являются довольно блочными элементами - специальные правила применяются к размеру и положению, как их дочерним элементам (очевидно), так и самому элементу table.

Соответствующие спецификации:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#block-box

Ответ 2

Я думаю, что это связано с различными версиями браузера CSS. Я только что пробовал ваш код, а Firefox3 не сворачивает вертикальный край, но IE7 и Safari3.1.2 делают.

Ответ 3

Первоначально я думал, что Firefox 3 не чтит эту часть спецификации CSS:

Несколько значений свойства display отображают элемент block-level: "block", "list-item" и "run-in" (часть времени, см. окна запуска) и "таблица.

Я говорю, потому что спецификация говорит следующее о сворачивании полей...

Два или более смежных вертикальных поля блоков блоков при нормальном обтекании потока.

... и установка стиля таблицы на display: block делает крах краха, как вы ожидали, и установка его обратно на display: table снова отменяет свертывание.

Но снова посмотрев на это, спецификация также говорит об этом (внимание мое):

Элементы уровня блока (, за исключением элементов таблицы "
, которые описаны в следующей главе) генерируют блок главного блока... Основные блоки блоков участвуют в контексте форматирования блоков.
И затем в разделе Контекст блока форматирования:

Вертикальные поля между соседними блочными блоками в контексте форматирования форматирования блока.

Чтение, которое заставляет меня считать правильным, что поля между таблицей (которая не участвует в контексте форматирования блока) и абзацем (который делает) не должны сбрасываться.

Ответ 4

Я понимаю, что вертикальные поля только рушится между таблицей и заголовком [1]. В противном случае таблица должна вести себя как любой другой элемент блока [2] (т.е. Два элемента с полями 100px = 200px между ними).