我知道如何解决它,但我的问题是为什么会发生这种情况。我有一个父部分和一个子 div。问题是当在孩子中放置 margin: 20px 时,一个边距被应用到所有东西,而不仅仅是孩子,这是我想相对于父母应用它的地方。为什么它适用于一切?我知道它可以通过放置一个位置来解决:对父级绝对。但是没有这个,因为它适用于我所有的内容,父母和孩子。你有什么解释吗?
body{
margin: 0 auto;
padding: 0;
}
#padre{
width: 400px;
height: 400px;
background: orange;
}
#hijo {
width: 100px;
height: 100px;
background: green;
margin:20px;
}
<body>
<section id="padre">
<div id="hijo" >1</div>
</section>
</body>
解释是这被称为“折叠边距”。
这发生在三种主要情况下:
正如我们所看到的,在您公开的示例中,第二种情况“父亲和第一个/最后一个孩子”适用。我应用了一个 1px 透明边框来演示文档所说的内容:“如果没有边框或......将父边距顶部与子边距顶部分开,......”,那么添加边框基本上不会坍塌。
参考:
https://www.w3.org/TR/CSS2/box.html#collapsing-margins
https://www.w3.org/TR/CSS2/visuren.html#block-formatting
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing