Warum zeigt Margin-Bottom als Margin-Top?

Question

Ich versuche, margin-bottom auf einem div innerhalb Elternteil hinzuzufügen, aber es als Margin-Top der Eltern zeigen. Warum?

HTML:

<div id="wrapper"> 
    <div id="content"> 
     <div id="box"></div> 
    </div> 
</div> 

CSS:

#wrapper{ 
    border: 1px solid #F68004; 
} 

#content{ 
    background-color: #0075CF; 
    height: 100px; 
} 

#box{ 
    margin-bottom: 50px; 
} 

Was ich erwartet:

Was ich:

Update:

Ich kann dieses Problem zu beheben, aber ich habe keine Ahnung, warum nicht, dass Code arbeiten? kann jemand erklären?

Update 2:

Es sieht wie die meisten Antwort sagen, dass es wegen der Marge Zusammenbruch und meine Frage duplizieren mit this. Aber bitte beachten Sie, dass ich margin-bottom aber nicht margin-top gesetzt habe. Ich lese auch über kollabierende Margen und ich kann keine Regel finden, dass Margin-Bottom margin-top werden kann. Kann mir jemand aufzeigen?

Answer 1

Geben margin-bottom: 50px; zu #content statt #box Weil du Höhe #content div und hier Marge Zusammenbruch gegeben haben.

Here it is explain with example

Updated Fiddle

Answer 2

Dies ist jsFiddle mit Ihren Erwartungen:

jsFiddle

, wie Sie die gelbe Grenze sein um den gesamten Inhalt wollte, so dass es besser war, zu verlängern Ihre Verpackungshöhe.

#wrapper{ 
 
    border: 1px solid #F68004; 
 
    height: 150px; 
 
} 
 

 
#content{ 
 
    background-color: #0075CF; 
 
    height: 100px; 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
     <div id="box"></div> 
 
    </div> 
 
</div>

Answer 3

Bitte überprüfen Sie unter Code

#content { 
    background-color: #0075cf; 
    height: 100px; 
    margin-bottom: 50px; 
} 

#box{ 
    /* margin-bottom: 50px; */ 
} 

Answer 4

Sie können wie folgt versuchen: Demo

Statt Höhe #content der Einstellung, können Sie es für #box verwenden können

#content { 
    background-color: #0075CF;   
} 

#box {margin-bottom: 50px; height: 100px;} 

Answer 5

Der Grund, warum der Marge oben zu sein scheint, ist aufgrund margin collapsing:

Eltern und ersten/letzten Kind
Wenn es keine Grenze, Polsterung, Inline-Inhalt oder Clearance Trennen Sie den oberen Rand eines Blocks mit dem oberen Rand des ersten untergeordneten Blocks oder ohne Rand, Abstand, Inline-Inhalt, Höhe, minimale Höhe oder maximale Höhe, um den unteren Rand eines Blocks mit dem Rand zu trennen -bottom von seinem letzten Kind, dann diese Ränder zusammenbrechen. Der reduzierte Rand endet außerhalb des übergeordneten Elements.

Wenn Sie eine transparente Grenze zu Ihren Eltern div zugeben (#content), dann wird Ihr Marge verhalten:

#wrapper{ 
 
    border: 1px solid #F68004; 
 
} 
 

 
#content{ 
 
    border:1px solid transparent; 
 
    background-color: #0075CF; 
 
    height: 100px; 
 
} 
 

 
#box{ 
 
    margin-bottom: 50px; 
 
    height:10px; background-color:red; 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
     <div id="box"></div> 
 
    </div> 
 
</div>

Wenn Sie den weißen Bereich am Boden wie in Ihrem erwarteten wollen Bild, fügen Sie einfach padding-bottom:50px zu #wrapper

aktualisieren

Warum die margin-bottom ist margin-top verursacht: Da der kollabierenden Rand außerhalb Ihrer Eltern div bewegt, wird es Rand unten des Elements außerhalb des Mutterunternehmens (die die obere Grenze von #wrapper ist) -, die Ihre #content div nach unten drückt (was Schaut es, wie margin-top)

Answer 6

Lösung 1:

<div id="wrapper"> 
    <div id="content">  
    </div> 
    <div id="box"></div> 
</div> 

Lösung 2:

<div id="wrapper"> 
    <div id="content"> 
     <div id="box"></div> 
    </div> 
</div> 


    <style> 
    #wrapper{ 
    border: 1px solid #F68004; 
    height: 150px; 
    } 

#content{ 
    background-color: #0075CF; 
    height: 100px; 
} 

#box{ 
    /*margin-bottom: 50px;*/ 
    } 
</style> 

Answer 7

versuchen dieses

CSS

#wrapper{ 
    border: 1px solid #F68004; 
} 

#content{ 
    background-color: #0075CF; 
    height: 100px; 
    margin-bottom: 50px; 
} 

Answer 8

Sie sollten den Rand geben statt #box #content. Und wenn Sie nur #box Rand geben möchten. Versuchen Sie, es mit Minus-Wert zu geben, d.h.- (50 + div Höhe) Wenn div #box Höhe 150px dann ist Einsatz-

#box { 
 
     margin-bottom: -200px; 
 
    }