Почему не отступает поле <table>с соседним <p>?

Question

Исходя из моего понимания спецификации 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>

Я думал, что между двумя элементами будет 100px, но есть 200px - поля не падают.

Почему бы и нет?

Редактировать: Кажется, это ошибка таблицы: если я дублирую таблицу и дублирую абзац, два абзаца будут смещены по краям. Две таблицы не будут. И, как отмечено выше, таблица не будет свернуты полями с абзацем. Это совместимое поведение?

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

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

p {
  margin: 100px
}

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

Answer 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

Answer 2

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

Answer 3

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

Несколько значений свойства 'display' составляют элемент уровня блока: 'block', 'list-item' и 'run-in' (часть времени; см. Поля run-in) и 'table ».

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

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

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

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

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

А затем в разделе Контекст форматирования блока :

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

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

Answer 4

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

1. http://www.w3.org/TR/CSS2/tables.html#q5
2. http://www.w3.org/TR/CSS2/box.html