h1，h2，h3 ..元素吃div div邊緣

爲什麼h1，h2，h3元素邊距在div中被忽略？h1，h2，h3 ..元素吃div div邊緣

<div class="col"> 
    <h3>This is header</h3> 
</div> 
<div class="col"> 
    <h3>This is header</h3> 
</div> 

.col { 
    background: gray; 
    margin-bottom: 1em; 
} 

.col h3 { 
    margin-bottom: 1em; 
}

當我把^ h元素插入DIV並且在它沒有其他文字，雖然^ h元素和div元素底部的邊距spicified，H底邊距被忽略。

來源

2013-06-19 Lambrusco

這是正確的行爲，你要的是給你的'col'類'填充底：1EM;' – Brewal

我不知道什麼是你試圖做...但也許你正在嘗試做一個填充：檢查'padding-bottom：1em;'而不是。 – maqjav

您嘗試忽略底部邊距設置邊距：-18px;在.col css –

爲兩個兄弟姐妹分配邊距會導致邊距在相鄰邊緣處摺疊。

這MDN document詳細解釋了情況。

頂部和塊的底部邊緣有時合併（摺疊）成一個單一的餘量，其尺寸是最大的邊緣的組合進去，稱爲餘量摺疊行爲。

保證金塌陷發生在三個基本情況：

相鄰的兄弟姐妹
家長和第一/最後一個子
空塊

來源

2013-06-19 09:05:58

謝謝，這就是我真正想知道的 – Lambrusco

試試這個CSS：

.col { 
    background: gray; 
    padding-bottom: 1em; 
} 

.col h3 { 
    padding-bottom: 1em; 
}

更改margin-bottom至padding-bottom。

jsFiddle

來源

2013-06-19 09:06:37

h1，h2，h3 ..元素吃div div邊緣

回答

相關問題