André Buck: div ohne border - kein margin möglich?

Hallo zusammen,

ich hab ein wenig im Forum gesucht und da es bei den Wörter 'div','border','margin' auf Grund des Boxmodell so viele Treffer gibt, hab ich mich entschlossen einen neuen zu eröffnen - also wenn das Thema bereits vorhanden ist -> 'Sry' vorweg.

Wenn ich folgendes Konstrukt habe:

<html>
<head></head>

<body style="margin:0px;">

<div style="background-color: red; display:block;">
  <div style="margin-top:21px; width: 300px; border: 1px solid black;">Lorem Ipsum...</div>
</div>

</body>
</html>

... zeigt sich (abgesehen vom IE mal wieder) das Verhalten, dass der äußere <div> auf das 'margin' vom inneren <div> erst reagiert, wenn er einen 'border' bekommt. Es scheint so, also ob man ohne 'border' keine Grenze zur äußeren Box bekommt!?
(einfach mal 'border: 1px solid red' hinzufügen und Unterschied angucken)

  • Ist das so? Kann ein verschachtelter div nur dann ein 'margin' korrekt darstellen, wenn die äußere Box einen Border hat? *kratz-am-kopf*

  • Danke vorab.

Grüße André...

  1. Yerf!

    • Ist das so? Kann ein verschachtelter div nur dann ein 'margin' korrekt darstellen, wenn die äußere Box einen Border hat? *kratz-am-kopf*

    "Korrekt" ist in diesem Fall immer so eine Frage. Schuld sind die "Collapsing Margins", die dazu führen, dass der Margin des inneren und des äußeren zusammengefasst (der größere gewinnt) als Margin des äußeren dargestellt wird. Häufig hilft stattdessen dem äußeren Block ein Padding zu geben.

    Gruß,

    Harlequin