[CSS] Margin child heeft effect op afmeting parent

[Michali]

Ik dacht dat ik het css box-model inmiddels wel redelijk onder de knie had, maar ik loop toch tegen een probleem aan waarbij ik niet snap waarom dit zo werkt. Misschien kan iemand dit mij uitleggen of me wijzen op een bepaald deel in de specificatie waarin het wordt uitgelegd, want ik wil wel graag snappen hoe het werkt.

Het probleem lijkt op te treden als een bepaald element een parent element en een child element met een top margin heeft. De waarde van die top margin lijkt te worden opgeteld bij de hoogte van de parent van het betreffende element.

Als het element een border krijgt, dan lijkt het niet op te treden.

Dit komt voor in Firefox 2.0 en Opera 9.0, maar niet in IE 6.0. Vandaar dat ik vermoed dat het gedefinieerd gedrag is, maar het lijkt me wel erg vreemd als dit het geval is.

Ik heb een voorbeeld pagina gemaakt waarin het fenomeen wordt gedemonstreerd.

[crisp]

Ik denk dat het deze is:

quote: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

IE's margin-collapsing model is gewoon broken, dat is algemeen bekend.

[ Voor 4% gewijzigd door crisp op 08-12-2006 15:21 ]

[Michali]

Een overflow: auto; op de inner-container (in mijn voorbeeld) lost het probleem inderdaad op, zoals daar gezegd. Als ik het goed begrijp, erft de parent een top margin van zijn child als de parent geen top border of padding heeft. Want de margin direct op inner-container zetten heeft exact hetzelfde effect. Ok, bedankt, ik denk dat ik het wel snap.

Ik ga me nog eens goed verdiepen in collapsing margins, want daar weet ik blijkbaar nog niet genoeg over.

[ Voor 13% gewijzigd door Michali op 08-12-2006 15:54 ]