Top Margin verhält sich nicht wie ich erwarte .. warum?

Question

So habe ich schon seit einiger Zeit html gemacht .. aber ich habe Probleme, wenn ich Ränder benutze. Dies führt dazu, dass ich normalerweise nur Padding verwende.

Wie auch immer, lassen Sie mich Ihnen ein Beispiel für etwas geben, an dem ich gerade arbeite.

http://vasoshield.xcsit.com/index.html

Hauptstruktur:

<div id="main"> 
    <div id="header"> 
     <div id="mainNav"> 
      main navigation... 
     </div> 
    </div> 
    <div id="content"> 
     page content... 
    </div> 
</div> 



#main { 
    margin: 0 auto; 
    width: 745px; 
    padding-left: 175px; 
    padding-right: 50px; 
    background: url(../images/white_bg.jpg) no-repeat top left; 
    position: relative; 
} 

#header { 
    height: 210px; 
} 
#mainNav { margin-top: 175px; } 

Das Problem ist .. Ich margin-top setzen: 150px auf der "Mainnav" div .. und statt nach unten drücken 150px von "header" div .. die ganze Seite wird nach unten bewegt. Also wird der "Haupt" -Teil tatsächlich 150px gedrückt. Ich verstehe nicht warum !! Wenn ich padding-top: 150px für "mainNav" div verwende, benutzt es tatsächlich den "header" div um von dort herunter zu drücken.

Macht meine Frage Sinn?

Ich bin sicher, dass es eine Art Regel gibt, von der ich nichts weiß. Danke im Voraus !!

Answer 1

Sie sind den Umgang mit Kollabieren Margen.

See: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Kurz gesagt, der obere Rand von #main und #header sind neben (angrenzende) die Marge von #mainNav. Solche vertikal angrenzenden Ränder sind im Allgemeinen kollabiert; sie bilden eine kombinierte Marge. Vergleichen Sie dies mit den Td-Grenzen mit border-collapse: collapsed - auch diese werden nur zu einer Grenze, deren Breite gleich der dicksten Grenze ist.

Nur vertikale Ränder kollabieren, und sie kollabieren nur, wenn sie aneinandergrenzen, und sie sind nicht spezielle. Weitere Details finden Sie in der Spezifikation, aber Dinge wie absolute Positionierung, Floating und einige andere Dinge verhindern, dass die Ränder kollabieren.

Zum Beispiel könnten Sie #header { padding-top:1px; } setzen, oder Sie wenden einen der spezifizierten Fälle an, die verhindern, dass Grenzen aneinander grenzen (wie das Floaten des Elements). Beachten Sie, dass Floating und die anderen Fälle verhindern, dass die Ränder kollabieren, um die Spezifikation zu vereinfachen: Sie betreten komplexes Gebiet, für wenig Gewinn.

Ihre Fallback-Option, Padding statt Rand zu verwenden (oder jede Art von Zwischenabstand anzuwenden, wie die 1px-Padding, die ich zuvor beschrieben habe), sind die bessere Wahl; Sie wirken sich minimal auf den Rest Ihres Layouts aus, während die Einführung von Floats und/oder absoluter Positionierung zu merkwürdigen Interaktionen führen kann, sobald Seiten komplex werden (insbesondere, wenn Sie anfangen, Druckszenarien in Betracht zu ziehen).

Answer 2

versuchen Sie, Ihre Hauptposition in Position zu bringen: absolut; Es wird funktionieren, denke ich. Ich kenne den Grund nicht

Answer 3

Da gibt es keinen Inhalt in der header div vor der mainNav Div, der Rand ist die erste Sache, die der Browser berücksichtigen muss, so sieht es aus, als ob die ganze Seite nach unten verschoben wird . Ich schlage vor, allen Divs 1px solid red Grenzen hinzuzufügen, damit Sie sehen können, welcher wo geht.

Answer 4

Nun .. einfach hinzufügen Überlauf: versteckt, um den "Haupt" Container funktioniert .. fragt mich nicht warum!