Вот что происходит:
Падение маржи.Ответ Джероена указал мне на спецификации блочной модели W3C для коллапсирующих полей , которые вызывали у меня головную боль и не совсем отвечали на вопрос о границе (на которую сначала указал Одед).Затем я нашел эту статью и сложил решение вместе (я говорю только о верхних полях, но точно такое же решение применимо к нижним полям).
Когда соприкасаются вертикальные поля двух элементов [уровень блока], используется большее поле и меньшее поле отбрасывается.
Все в вашем кодесчитается элементом уровня блока, включая теги <html> и <body>.
По умолчанию <body> имеет margin-top 8 пикселей в родительском элементе <html>.
Первый тег <p>имеет значение по умолчанию margin-top 16 пикселей.
Свертывание полей не ограничивается братьями и сестрами, поэтому тег <p> начинает проверять позицию и поля родительского тега.
Элемент #child имеет margin-top, равный 0. Верхнее поле <p> касается верхнего поля #child, поэтому они сжимаются до единого поля 16px (16> 0).,Поле 16px тега <p> «проталкивает» и действует как поле для тега #child.
Поле 16px из <p> по-прежнему проверяет наличие полей непосредственно над ним,Далее будет тегом #parent, который также имеет верхнюю границу 0.
НО, граница 1px на #parentпрепятствует дальнейшему продвижению <p>. <p> больше не будет сталкиваться с полями над ним, потому что он касается границы 1px.Таким образом, разрушение останавливается внутри верхней границы #parent.
Отображается верхнее поле размером 16px, а под ним - тег #child с полем 0px, свернутым.
Вот почему *Поле 1074 * на 32 пикселя выше, чем поле #child: поля <p> "прорывались" до тех пор, пока не достигли чего-то, что не было поля (граница 1 пикселя).Итак, что произойдет, если граница 1px на #parent не была там, чтобы остановить разрушение?
Выполните шаги 1-7 выше.
- Верхнее поле
<p> попадает в верхнее поле элемента #parent 0px.Опять же, <p> - это большее поле (16 против 0), поэтому свертывание продолжается вверх.
<p> верхнее поле достигает тега <body>.<body> имеет верхнее поле по умолчанию 8 пикселей.Тег <p> больше, поэтому теперь тег <body> «унаследовал» верхнее поле 16px, а 8px отбрасывается.
Верхнее поле <p> достигает<html> тег.Поскольку <html> является корневым элементом, свертывание останавливается здесь.Тег <body> визуализируется с верхним полем 16px, а элементы #parent, #child и <p> отображаются ниже;<p> плотно прилегает к окну #parent, потому что через него разбилось поле.
Причина, по которой мне потребовалось так много времени, чтобы понять это та же самая причина, по которой я не слышалколлапсирующих полей до сегодняшнего дня: Firebug четко не отображает коллапсирующие поля .В Firebug тег <p> по-прежнему показывает, что он удерживает верхнее поле в 16px.Это правда.Тем не менее, нет никаких признаков того, что какое-либо свертывание имело место - тег <body> по-прежнему отображает верхнюю границу 8px, даже если он был отброшен.
Я рад, что знаю это сейчас;это проясняет большую путаницу, которую я имел в отношении макетов страниц.
Редактировать:
Статья, на которую я ссылался , действительно стоит прочитать.Он не только дал мне информацию, необходимую мне для ответа, но и детализировал, как в IE7 тег <body> не участвует в разрушении границ.Это многое объясняет.