如果我有以下代码怎么办：
HTML：
<section class="home">
</section>
<section class="main">
<h1>Hello</h1>
</section>
CSS代码：
html,body{
height: 100%;
width: 100%;
}
.home{
background: #000;
height: 100%;
}
.main{
height: 100%;
background: pink;
}
为什么两个部分之间有空白或边距？问题似乎出在 h1 标签上。如果我做 ：
h1{
margin: 0;
}
巴姆！问题解决了 。
我对此有两个问题。
第一个小问题，现在浏览器可能会应用这种样式，我可以通过重置来纠正这个问题，没有问题。但这仍然是一个问题。
我的第二个问题，也是一个大问题，现在假设浏览器甚至我明确指定 h1 的顶部边距应该是 20-30px，边距应该位于 .main 部分的一侧，为什么将边距应用于 h1 .main 内部是否充当 .main 和 .home 之间的边距？
这个独特问题的原因是什么？
我读过有关边距折叠的内容：
Mozilla
CSS 技巧
但这似乎更像是子保证金添加给父保证金。
问题的Jsfiddle
谢谢 。
亚历山大.
http://jsfiddle.net/naeemshaikh27/qbaucv3j/1/
.main{
overflow: hidden;
height: 100%;
background: pink;
}
这是正常行为（至少在浏览器实现中）。边距不会影响子级相对于其父级的位置，除非父级具有填充，在这种情况下，大多数浏览器会将子级的边距添加到父级的填充中。
source https://stackoverflow.com/a/1939980/3556874
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
