Warum drückt das Festlegen des oberen Rands dieses untergeordneten Elements seinen Elterncontainer nach unten?

Question

Ich habe zwei divs:

        Einfache und kostengünstige Web-Lösungen  

        Entwickelt von einem engagierten Team 

beide haben eine Breite von 100% und eine Höhe von 800px. Dem ersten Titel habe ich einen oberen Rand von 160px zugewiesen. Anstatt den Header tiefer in sein übergeordnetes div zu verschieben, verschiebt er das übergeordnete div mit sich, wie Sie auf diesem Bild sehen können:

Hier ist mein relevanter CSS:

h1{
    font-size: 48px;
    font-family: $header-font-stack; 
    font-weight: 100;
    width: 400px;
}

#headercontainer{
    width: 100%; 
    height: 800px;
    background-image: image-url("hintergrund.jpg");
    background-position: center top;
    background-repeat: no-repeat;
}

#headercontainer h1{
    text-align: center;
    margin: 0px auto;
    margin-top: 160px;
    color: #610B21;
}

Die Verwendung von padding funktioniert offensichtlich, aber ich würde gerne korrekter sein und einen Rand verwenden. Wie kann ich einen oberen Rand einstellen und den Titel tiefer in den Container verschieben, ohne den Container mitzubewegen?

Answer 1

Dies liegt an margin collapsing:

Obere und untere Margins von Blöcken werden manchmal zu einem einzigen Margin kombiniert (zusammengefasst) in ein einzelnes Margin, dessen Größe das größte der kombinierten Margins ist wird zu einem Verhalten bekannt als margin collapsing.

Dies führt dazu, dass das übergeordnete Element den oberen Margin des untergeordneten Elements umkehrt vererbt.

Dies kann verhindert werden, indem vor das untergeordnete Element hinzugefügt wird.

Demo-Fiddle

...oder durch Anwendung eines der unten stehenden Punkte am übergeordneten Element:

1. float: left / right
2. position: absolute
3. display: inline-block

Hinzufügen von display:inline-block; zum übergeordneten Element ist wahrscheinlich bevorzugt, wenn es auf eine Breite von 100% festgelegt werden soll.

Demo-Fiddle

Answer 2

Ich würde tatsächlich argumentieren, dass diese Antwort besser ist:

https://stackoverflow.com/a/49075574/2387316

Ja, ich weiß, es ist meine eigene Antwort, aber ich denke, es ist wichtig, dass wir nicht willkürliche Padding-Bits hinzufügen, die box-sizing ohne Grund ändern, überflüssige Elemente zum DOM hinzufügen oder display/padding einfach ändern, um ein Anzeigeproblem zu beheben. Diese Lösungen verursachen alle ihre eigenen Probleme: SEO ist schlechter, unberechenbares box-sizing-Verhalten beim Versuch, etwas anderes zu tun, Ärger verursacht durch Positions- und Anzeigeänderungen, usw. Diese Lösung ist gut für SEO, ist skalierbar und hat keine anderen greifbaren Auswirkungen, wenn Sie versuchen, andere Dinge mit Ihren Elementen zu tun.

Answer 3

Verwenden Sie einfach box-sizing: border-box; im Elternelement und setzen Sie das Padding dort anstelle von margin-top. So behalten Sie sowieso einen konsistenten Abstand auf allen Seiten bei

JSFIDDLE

Answer 4

Fügen Sie einfach etwas oberes Padding zum übergeordneten Element hinzu. Selbst 1px und es wird behoben.