CSS: Добавление границы изменяет цвет фона

Question

HTML (?!):

<div> <p></p> </div> 

CSS:

div { background-color:green; border-top:1px solid white; } 
p { background-color:yellow; height:50px; margin:70px; } 

Демо:http://www.jsfiddle.net/Xy8QF/4/

Почему область выше желтый абзац зеленый, а область внизу - белый?

btw Я уже понял это, но я думал, что я опубликую это в любом случае. Рассмотрим его загадку :)

---

Update: Просто, чтобы добавить к принятому ответу:

1. только вертикальные поля коллапса
2. Края не разрушится, если внешний элемент (в данном случае DIV) имеет прокладку или границу

Answer 1

Это происходит потому, что поля двух элементов блока с position:static (по умолчанию) в соответствии с CSS 2.1 8.3.1, то есть поле «переносится» на элемент body. Это demo показывает, что это не происходит с абсолютно позиционируемыми элементами, одним из исключений (наряду с границей не none), указанной в вышеупомянутом стандарте.

Answer 2

Хороший вопрос. :) Вы можете решить это, предоставив div нижней границе, или если вы не хотите, давая ей высоту 100%. ;-)

Answer 3

Это потому, что <p> находится справа от нижней части прилагаемого <div>. Поскольку нет ничего, что ограничивало бы высоту <div>, рендеринг дает достаточно места, чтобы сместиться до нижней части <p>. Любая явная высота> 50px покажет нижнюю.

Yup, на обновление, точно. Ящик расширяется вертикально, но не горизонтально. Кроме того, прокладка помещает пространство внутри коробки, поэтому p не может продвигаться вверх по границам.

Читайте на модели CSS коробки, например, здесь: http://www.w3schools.com/css/css_boxmodel.asp и здесь: http://www.w3.org/TR/CSS21/box.html

Answer 4

Область над желтым пунктом, как вы выразились, на самом деле не выше этого. Зеленый div содержит желтый абзац. Желтый абзац имеет край 70px, отталкиваясь от зеленых краев его контейнера. Желтый абзац имеет высоту, установленную для него, поэтому мы не можем видеть, как желтый отталкивается от зеленого на нижнем краю.