Caliga: Kindelement bestimmt margin (bzw. Hintergrund scheint durch)

SELF-Forum

Kindelement bestimmt margin (bzw. Hintergrund scheint durch)

Caliga
– Informationen zu den Bewertungsregeln

Hallöchen!

Ich habe hier ein seltsames Phänomen, für das ich keine logische Erklärung finden kann:
Die DIVs sollen eigentlich alle direkt untereinander kleben, dank margin.
Das klappt auch, außer wenn zu Beginn der DIVs ein bestimmtes (absatzerzeugendes?) Element steht.

Genaugenommen stimmt der margin der DIVs auch... das sieht man daran, dass sich die Höhe des DIVs nicht ändert, wenn man einen Rahmen drum macht. Gleichzeitig hat dann auch das ganze div die richtige Hintergrundfarbe...

Wie im folgenden Beispiel zu sehen, habe ich zwei Hacks gefunden:

  • margin-top für Kindelement
  • border für DIV

beide finde ich aber nicht sehr zufriedenstellend.
Kann mir vielleicht jemand dieses Verhalten erklären?
Danke schon mal für die Mühe :)

(Getestet mit Firefox, Konqueror, Opera. Konqueror und Opera stellen zumindest das oberste DIV wie erwartet dar.)

<html>
<head><title></title></head>
<body style="background-color:#93efef; padding:0px; margin:0px;">
 <div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;"><p>test</p></div>
 <div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;"><h1>Test</h1></div>
 <div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;">test</div>
 <div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top; border:thin solid red"><h1>Test</h1></div>
 <div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;"><h1 style="margin-top:0px">Test</h1></div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Kindelement bestimmt margin (bzw. Hintergrund scheint durch)

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Die DIVs sollen eigentlich alle direkt untereinander kleben, dank margin.
    Das klappt auch, außer wenn zu Beginn der DIVs ein bestimmtes (absatzerzeugendes?) Element steht.

    Kann mir vielleicht jemand dieses Verhalten erklären?

    Collapsing Margins:
    "The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Kindelement bestimmt margin (bzw. Hintergrund scheint durch)

      Caliga
      – Informationen zu den Bewertungsregeln

      Hi, wahsaga!

      Danke für die schnelle Hilfe :)

      Statt border-top hab ich jetzt einfach padding-top:1px;
      Das ist zwar auch irgendwie ein Hack, aber mit dem kann ich leben.

      Caliga

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln