nicht angemeldet
Hallo, Axel,
<div style="background-color:#efeff7;border:1px dashed #000000;">
<p style="margin:100px;">Inhalt</p>
</div>
<br />
<div style="background-color:#efeff7;">
<p style="margin:100px;">Inhalt</p>
</div>
Die Hintergrundfarbe im ersten Layer erstreckt sich über den gesamten Bereich, im zweiten nur über das <p>-Tag.
Der einzige Unterschied zwischen beiden Layern ist, dass der zweite keinen Rahmen hat.
Das div-Element ist nur ein leerer Block-Level-Container. Du gibst keine Größen(Höhen) vor, also beansprucht es den Platz, den das p-Element und dessen Ränder (margin, padding) beansprucht.
Ja, und? Das ist soweit logisch.
Die Hintergrundfarbe wird an seine Kind-Elemente weitergereicht.
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?
Nun wirkt sich die Hintergrundfarbe auf den div-Bereich aus.
Sie wirkt sich auch vorher darauf aus, aber eben nur teilweise, obwohl das Element offensichtlich dieselbe Höhe hat.
<div style="background-color:#efeff7;">
<p style="padding:100px;">Inhalt</p>
</div>
Wieso exakt ist es bei padding anders?
Grüße,
Mathias