nicht angemeldet
Hallo Mathias,
Das div ist _nicht_ automatisch eine Box laut http://www.w3.org/TR/REC-CSS2/box.html. Es ist ein Block-Level-Gruppierungselement.
Wo steht das genau geschrieben (das Dokument ist umfangreich); und was bedeutet das?
Nein ich meinte nicht, dass das dort steht, sondern: Es sieht so aus als wäre ein div nicht immer eine Box, so wie die dort beschriebenen Boxen.
Erst durch eigenen Inline-Content oder durch einen Border oder durch ein Padding wird es zu einer Box.
Das kann ich nicht nachvollziehen. Selbst wenn direkter Inline-Inhalt vorhanden ist, welcher eine anonyme Box bildet, werden die margins des folgenden Blockelements nur teilweise angezeigt - wie dein Beispiel auch zeigt.
Du meinst das Beispiel mit dem Image? Angezeigt wird der Margin vom p schon, nur in der Höhe nicht mit der Hintergrundfarbe des divs. In der Breite dagegen schon. Wenn nach dem p noch ein Inline-Inhalt steht, ist die Box vollständig.
Möglich wäre vielleicht: »If it has block-level children, it is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box« (http://www.w3.org/TR/REC-CSS2/visudet.html#q17). Somit kann die content height des Containerelement nur so hoch sein wie die border edge des p-Elements - aber was ist mit den margins des p-Elements, welche außerhalb der border edge liegen, wieso wirken sie über die content edge des Containers hinaus...? Nein, das kann nicht sein.
Doch, genau das steht doch da. Hat ein Block-level-Element nur Block-level-Children, so ist seine Größe so groß, wie die (mögliche)Rahmengröße des Kindelementes. Der Margin wird ja üblicherweise nicht mit umrahmt. Inline-Inhalte bilden anonymous-boxen. http://www.w3.org/TR/REC-CSS2/visuren.html#anonymous-block-level Dadurch vergrößert sich die umgebende Box auf die (mögliche) Rahmengröße von anonymous-box + Block-level-Kind.
<div style="background-color:#00AEAD;">
Inhalt vor p ist anonymous-box 1
<p style="margin:50px; border:1px solid black;">Inhalt von p</p>
Inhalt nach p ist anonymous-box 2
</div>
Soweit entspricht das, was wir sehen, erstmal dem Standard. Es _ist_ also offensichtlich so, dass der Margin eines Block-level-Elementes außerhalb seines umgebenden Block-level-Elements stehen kann. Sonst würde nämlich die Regel "If it has block-level children, it(the height) is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box." verletzt, da Margin außerhalb der border-edges ist.
Komisch ist allerdings, dass das Setzen eines Rahmens oder eines Paddings um das umgebende Block-level-Element ausreicht, um diese Regel zu brechen. Offensichtlich haben hier alle Rendering-Engines der Browser einen ähnlichen, leicht falschen, Programmalgorithmus.
viele Grüße
Axel