Berechnung der Containing Box Height und Einstürzen Ränder

Question

Wenn ein Containing Box Top margin kollabiert mit seinem ersten Kind oben margin, wie die height des enthaltenden Box berechnen (div im Beispiel)?

Nehmen Sie dieses einfache Beispiel:

div { 
 
    margin: 40px 0 25px 0; 
 
    background: yellowgreen; 
 
    /* border:1px solid black; */ 
 
} 
 
p { 
 
    margin: 20px 0 20px 0; 
 
    background: lightgreen; 
 
    padding: 10px; 
 
}

<div> 
 
    <p>Paragraph content</p> 
 
</div>

Die p mit div Margen Zusammenbruch ist, so dass wir sehen Farbe Hintergrund nicht div ‚s. Wenn Sie border zu div hinzufügen, kann der Margin-Kollaps gestoppt werden.

Da jedoch p 's margin ist auch von div' s margin, was bedeutet, div nicht mehr die p vollständig enthält. Dies ist kontra-initutiv.

ich durchgeblättert Calculating heights and margins Spezifikation und Collapsing margins und nicht finden kann, wie die height von div zu berechnen. Weil Sie die height von p nicht bestimmen können.

Answer 1

In diesem Fall div wird die gleiche height wie p aufgrund collapsing margins (abgesehen von padding)

Sie kennen den p s height durch die Berechnung font-size * line-height, die in Ihrem Fall sein wird:

font-size: 16px * line-height:1.25 = 20px

So

• p haben height:20px
• div aufgrund p eine zusätzliche 10px von padding mit ihm es die height:40px

body { 
 
    margin: 0 
 
} 
 
div { 
 
    margin: 40px 0 25px; 
 
    background: red; 
 
    /* border:1px solid black; */ 
 
} 
 
p { 
 
    margin: 20px 0; 
 
    background: lightgreen; 
 
    padding: 10px 
 
}

<div> 
 
    <p>Paragraph content</p> 
 
</div>

machen See:

• Mastering margin collapsing
• What You Should Know About Collapsing Margins

Hinweis: (Von @LGSon)

wenn font-size/line-height nicht gesetzt ist, wird der Browser standardmäßig verwendet , die unterschiedliche Ausgabe/Größe vongeben könnenin diesem Fall