[HTML] margin wordt toegepast op parent element?

[Svennetjee]

Hey,

Ik heb even een kort vraagje, waar jullie ongetwijfeld antwoord op weten.

Als ik bijvoorbeeld een wrapper heb, met een achtergrondplaatje, en ik zet in die wrapper een <p>aragraaf, dan wordt de (standaard) marge van dat element blijkbaar toegepast op de wrapper, en niet op de alinea zelf. Het kan ook zijn dat alleen het achtergrondplaatje van de wrapper naar beneden verschuift.

Dus stel:

HTML:

<div id="wrapper" style="background:transparent url(../images/bg_plaatje.jpg) no-repeat center top;">
<p>Inhoud paragraaf</p>
</div>

Dan krijg ik zoiets:

[div]
[ruimte zonder achtergrondplaatje (pixel of 5/10)]
[inhoud van de paragraaf, met achtergrondplaatje van de div]
[achtergrond plaatje van div, in div, gewoon zoals het hoort]
[/div]

Ik werk gewoon in (X)HTML 1.0 Strict (0 fouten, gevalideerd), en in Firefox 3.5 en IE8 treedt dit verschijnsel op. Fx met IEtab plugin geeft die vreemde ruimte niet weer, maar dat is wss in IE compatibility mode.

Anyone?

Edit: probleem is opgelost als ik de wrapper zelf padding geef, maar ben toch benieuwd hoe dit nou eigenlijk komt..

[ Voor 5% gewijzigd door Svennetjee op 07-01-2010 19:44 ]

[kalizec]

Zoek eens op Collapsing Margins, dat is namelijk hoe dat fenomeen heet en het is een onderdeel van de specs.

[crisp]

Hier staat het redelijk goed uitgelegd in de specificatie. En inderdaad: padding of een border voorkomt dit, evenals overflow:auto/hidden op het parent-element

[Svennetjee]

Bedankt, weer wat geleerd!