Dziwne zachowanie CSS ... usunięcie granicy 1px sprawia, że ​​<DIV> przesuwa się o około 20 pikseli - css, html-parsing

Mam następujące:

CSS

#pageBody
{
height: 500px;
padding:0;
margin:0;
/*border: 1px solid #00ff00;*/
}

#pageContent
{
height:460px;
margin-left:35px;
margin-right:35px;
margin-top:30px;
margin-bottom:30px;
padding:0px 0 0 0;
}

    <div id="pageBody">
<div id="pageContent">
<p>
blah blah blah
</p>
</div>
</div>

Jeśli odkomentuję linię graniczną na stronie Body,wszystko pasuje słodko ... Miałem granicę, żeby sprawdzić, czy wszystko jest zgodne z oczekiwaniami. Jednak usunięcie obramowania powoduje zmniejszenie strony o około 20 pikseli, podczas gdy pageContent w ogóle się nie porusza.

To nie jest prawdziwa strona, ale podzbiór. Jeśli nic nie jest oczywiste, mogę spróbować wygenerować minimalną próbkę roboczą, ale pomyślałem, że może być łatwa szybka odpowiedź.

Widzę ten sam dokładny problem w Chrome i IE8,sugeruję, że to nie ja, przeglądarka. Jakieś wskazówki, gdzie szukać? Zastanawiałem się, czy granica 1px nie była punktem zwrotnym, przez co zawartość div była po prostu zbyt duża, ale zmiana wysokości #pageContent na np. 400 nie robi żadnej różnicy, poza obcięciem dno tego diva.

Odpowiedzi:

Widocznie, gdy dodasz obramowanie lub margines do pageBody, szczyt pageContent zostanie obliczony jako pageBody.border + pageBody.margin + pageContent.margin-top. Inaczej wydaje się ignorować pageContent.margin-top.

To typowy przypadek zawalenie się marginesu

Marginesy się załamują.
(Widoczne po podaniu czerwonego tła #pageBody i niebieskiego tła #pageContent.)

To znaczy: ponieważ oba elementy są blokami, a marginesy dotykają się, zwijają się razem i większy pozostaje w mocy.
Jeśli między oboma marginesami znajduje się jakaś obramowanie lub dopełnienie, nie są one „przylegające”, a zatem nie są zwijane.

To oczekiwane zachowanie: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Spróbuj ustawić position: relative; na twoim div "s ... miałem już wcześniej podobne problemy.