- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
<style type="text/css">
* {
box-sizing: border-box;
}
#max-box {
width: 500px;
height: 500px;
background-color: aliceblue;
margin: 0 auto;
/*position: relative;*/
/*padding: 10px 10px;*/
}
#min-box {
/*position: absolute;*/
width: 300px;
height: 300px;
background-color: #4169E1;
margin: 30px 100px 100px;
}
</style>
<body>
<p id="max-box">
<p id="min-box">
</p>
</p>
</body>
如图、我并没有给父元素 max-box 加 margin，但是也被撑高了
伊谢尔伦2017-04-17 13:55:37
首先，这和box-sizing无关，无论是否设置，都会发生题主所说的情况。
这个现象叫做外边距合并（Collapsing Margins），在w3c的css2.2规范文档 - collapsing margins中提到了：
Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
top margin of a box and top margin of its first in-flow child
...
这里提到的就是垂直外边距发生合并的条件，它们必须同时满足。题主的例子里，就属于"top margin of a box and top margin of its first in-flow child"的情况，此外，它们之间没有任何行内文字，内边距等“隔离元素”，因此会变成这样。
对应的，只要改变一些状态，就可以避免垂直外边距合并，题主注释掉的position: absolute;就是其中一种。
阿神2017-04-17 13:55:37
这个是CSS样式margin叠加的问题：
如果相邻两个元素都有margin，那么间距会取两者较大的作为间距距离；
同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。
伊谢尔伦2017-04-17 13:55:37
不是因为box-sizing的问题，min-box的margin-top为30px,会影响父级元素跟着一起有一个margin-top，给max-box添加一个overflow：hidden；就可以了
