После нескольких правок я думаю, что получил ответ:)
Я также испытал это загадочное поведение. Я думаю, что часть объяснения находится в разделе 10.6.7 спецификации CSS2.1 :
В некоторых случаях (см., Например, разделы 10.6.4 и 10.6.6 выше), высота элемента
который устанавливает контекст форматирования блока, вычисляется следующим образом:
Если у него есть только дочерние элементы на уровне строки, высота - это расстояние между вершиной
верхняя строка строки и нижняя часть самой нижней строки строки.
Если у него есть дочерние элементы уровня блока, высота - это расстояние между верхним краем поля
самый верхний дочерний блок уровня блока и нижний край поля самого нижнего блока-
ровный дочерний ящик.
Те «определенные случаи», перечисленные в разделе 10.6.6, включают плавающие элементы.
Элемент #nivel21
в вопросе является плавающим элементом и содержит дочерние элементы уровня блока (a <p>
), поэтому применяется это правило особого случая, а высота <div>
вычисляется с использованием верхние и нижние края поля тега <p>
.
Во-вторых, эта страница о сворачивающихся полях может дать представление о том, почему высота #nivel22
не не включает поля тега <p>
:
[...] margin-top элемента p фактически становится верхним полем элемента div и выталкивает div вниз на страницу [...]
Тег <p>
имеет неявное поле (в моих тестах 10px), которое необходимо свернуть с полем 2em внешнего элемента #nivel1
, поэтому по этой причине браузер делает вид, что тег <p>
не имеет на полях вообще (вместо этого ставится #nivel22
), что означает, что высота #nivel22
уменьшается до высоты строки тега <p>
.
Надеюсь, этот ответ имеет смысл для кого-то, кроме меня!