为什么在div中忽略h1,h2,h3元素边距?
<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 bottom margin被忽略。
答案 0 :(得分:3)
为两个兄弟分配边距会导致边距在边距相邻的地方崩溃。
这MDN document详细解释了这种情况。
块的顶部和底部边距有时会合并(折叠) 单个保证金,其大小是合并的最大边际 进入它,一种称为边缘崩溃的行为。
保证金崩溃发生在三个基本情况中:
答案 1 :(得分:0)
试试这个CSS:
.col {
background: gray;
padding-bottom: 1em;
}
.col h3 {
padding-bottom: 1em;
}
将margin-bottom
更改为padding-bottom
。