nicht angemeldet
Hallo Mathias,
Das p-Element samt margins hat a sollte das Elternelement vergrößern und somit sollte die Hintergrundfarbe des Elternelements sichtbar sein, da das p-Element selbst transparent ist. Nach obiger Definition umfassen die hier entscheidenden Ausmaße des Elements auch die margins und somit sollten diese auch gefärbt sein, da sie nicht über das Elternelement hinauslappen können.
Die Browser sehen allerdings offensichtlich keinen Grund, den Außenrand (margin) des p-Elements mit der Hintergrundfarbe zu färben. Beim Innenrand (padding) läge die Sache schon anders.
Wieso?
Durch den Rahmen bekommt das div-Element aber eigenen Inhalt.
Häh - was bedeutet das? Was hat Rahmen mit »eigenem Inhalt« zu tun? Kannst du eventuell den relevanten Standard-Auszug posten?
Explizit steht das nirgends, aber folgendes scheint mir logisch:
Das div ist _nicht_ automatisch eine Box laut http://www.w3.org/TR/REC-CSS2/box.html. Es ist ein Block-Level-Gruppierungselement. Erst durch eigenen Inline-Content oder durch einen Border oder durch ein Padding wird es zu einer Box. Solange es keine Box ist, wird der Margin seiner Box-Kindelemente transparent dargestellt. (Margin area: Margins are always transparent.)
<div style="background-color:#efeff7;">
<p style="padding:100px;">Inhalt</p>
</div>Wieso exakt ist es bei padding anders?
Weil Padding innerhalb des p-Elements liegt, Margin aber außerhalb? Meiner Ansicht nach macht ein Box-Kindelement mit Margin aus einem div keine Box (siehe oben). Der Hintergrund im Beispiel ist der Hintergrund der p-Box, nicht des divs.
Einige weitere Beispiele, die meine Ansicht zu stützen scheinen ;-))
<hr />
<div style="background-color:#00AEAD;"><p style="margin:50px; border:1px solid black;">Inhalt</p></div>
<hr />
<div style="background-color:#00AEAD;"><p style="padding:50px; border:1px solid black;">Inhalt</p></div>
<hr />
<div style="background-color:#00AEAD;">Inhalt vor p<p style="margin:50px; border:1px solid black;">Inhalt von p</p>Inhalt nach p</div>
<hr />
<div style="background-color:#00AEAD;"><img src="#" width="1" height="1" border="0" alt=""><p style="margin:50px; border:1px solid black;">Inhalt von p</p></div>
<hr />
<div style="background-color:#00AEAD; padding:1px;"><p style="margin:50px; border:1px solid black;">Inhalt von p</p></div>
<hr />
<div style="background-color:#00AEAD; border:1px solid black;"><p style="margin:50px; border:1px solid black;">Inhalt von p</p></div>
<hr />
viele Grüße
Axel