Tobias H: Margin wirkt sich über übergeordneten Container hinaus aus

Beitrag lesen

SELF-Forum

Margin wirkt sich über übergeordneten Container hinaus aus

Tobias H
– Informationen zu den Bewertungsregeln

Hallo alle zusammen,

Folgendes Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <title>CSS-Test</title>  
        <style type="text/css">  
            #box1, #box2, #box3, #box4 {  
              width: 500px;  
              height: 200px;  
              /* border: 1px solid black; */  
            }  
            #box1 {  
                background-color: blue;  
            }  
            #box2 {  
                background-color: red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="box1">  
        </div>  
        <div id="box2">  
            <p>Text</p>  
        </div>  
        <hr>  
        <div id="box1">  
        </div>  
        <div id="box2">  
        </div>  
    </body>  
</html>

Wie man sieht, verschiebt der Absatz gleich den ganzen Container mit nach unten, anstatt nur sich selbst innerhalb den Containers nach unten zu schieben.
Setzt man jetzt allerdings den Border (auskommentiert) ist plötzlich alles wieder korrekt.

Kann mir das jemand erklären? Ist das tatsächlich eine CSS-Spezifikation?
Wenn ja, kann man das auch anders lösen, als einen Border zu setzen?

viele Grüße,
Tobias

PS: Ohne die Doctype-Angabe zeigt der IE es ohne Abstand an.

Beitrag melden
–
Informationen zu den Bewertungsregeln