• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

margin bei Überschriften h1

C

Corraggiouno

Mitglied
hi,

hätte mal zu folgendem Code eine Fragen:

Code: 
* {margin: 0px; padding: 0px;}

html
{
height: 100.3%;
}

body
{
background: #59abdd;
font-family:Tahoma;
font-size:0.8em;
color:#ffffff;
}


div#wrapper
{
background:#ffffff;
width: 800px;
margin:5px auto;
}

div#header
{
background:url(../images/head_background.png) no-repeat;

width:800px;
height:125px;
}

h1
{
font-family:Tahoma;
font-size: 1.2em;
color:#001c44;
margin-top:40px;
/*padding-top:75px;
padding-left:110px;  */
}

html-code
Code: 
<body>
<div id="wrapper">
    <div id="header">
    <h1>Zahnarztpraxis</h1>
    </div>
  
</div>



</body>
</html>
wenn ich bei h1, welches sich in im header befindet ein margin-top definiere, dann der ganze wrapper um 40px von oben nach unten geschoben;
und nicht nur h1 innerhalb vom header!
h1 bezieht sich doch auf das Elternelement header und nicht auf den wrapper
 
Werbung:
Wenn du dem wrapper-Div ein padding-top gibst, kannst du das umgehen. Alternativ sollte es auch funktionieren, wenn du dem wrapper ein overflow:hidden; verpasst.
 
danke für den Tipp; kannst du mir sagen warum das so ist? -- h1, welches sich ja im header befindet hat ja nix mit dem wrapper zu tun!
 
Werbung:
Das Ganze nennt sich Collapsing Margins und ist im Box-Modell erklärt →Box model

Kurz gefasst:
Wenn 2 oder mehr Boxen verschachtelt sind(Eltern- und Kindbox), werden deren vertikalen Abstände zusammengefasst. Das nennt man dann kollabierende Abstände(engl. collapsing margins).

Kollabierende Abstände finden nicht auf gleicher Ebene statt und auch nicht in horizontaler Richtung.

Anmerk. Der IE verhält sich in Versionen kleiner 8 anders, d.h. falsch, weshalb man auf margins(Aussenabstände) besonders Acht geben muss.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben