一般来说,元素的实际高度=元素高度height+上下margin外边距+上下padding内边距+上下border边框宽度
<body>
<div class="divTest">
<div class="divTest_one">
</div>
<div class="divTest_two">
</div>
</div>
</body>
<style>
.divTest{
border: 1px solid black;
width: 500px;
height: 500px;
}
.divTest_one{
border: 1px solid black;
padding: 20px;
margin: 20px;
height: 100px;
width: 100px;
background: red;
}
.divTest_two{
height: 100px;
width: 100px;
background: blue;
}
</style>
设置的高度 = height = 100px
实际高度(背景色为红色的高度)= height + padding + border = 100 + 40 + 2 = 142px
实际所占取高度 = height + padding + margin + border = 100 + 40 + 40 + 2 = 182px(有一个问题,如果蓝色方块也有margin,则两个方块的margin会重合中间的距离会取其中最大值。相邻两个方块则不会,也可以使用浮动,绝对定位解决重合。)
然而当我们给红色框添加样式box-sizing: border-box之后
设置的高度 = height = 100px
实际高度 = height + padding + border = 58 + 40 + 2 = 100px
实际所占高度 = height + padding + margin + border = 58 + 40 + 40 + 2 = 140px