您好,为什么子级的边距底部不增加父级的高度:
<div class="my-container">
<div class="margin">
Hello World
</div>
<div class="margin">
Hello World
</div>
.my-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
background-color: #3873fe;
margin: auto;
}
.my-container .margin {
width: 100px;
margin: 0 auto 50px;
background-color: #00ff82;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
但是如果为父级添加边框,父级的高度将会增加:
.my-container {
border:1px solid;
}
所以我想了解为什么会出现这种差异?
最佳答案
您需要将 overflow: auto;
添加到父 div。
.my-container {
overflow: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
background-color: #3873fe;
margin: auto;
}
.my-container .margin {
width: 100px;
margin: 0 auto 50px;
background-color: #00ff82;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<div class="my-container">
<div class="margin">
Hello World
</div>
<div class="margin">
Hello World
</div>
</div>
关于html - 边距增加父级的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43733994/