前言
本文主要总结了CSS margin的常见问题。包括margin的纵向重叠、margin空白标签重叠以及margin传递问题。
margin纵向重叠
margin纵向重叠：小的margin会重叠到大的margin中，从而margin不叠加，只以大值为准；
相邻元素的margin-top 和 margin-bottom 会发生重叠；
页面结构：
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
页面样式：
.box1{
width: 100px;
height: 100px;
margin: 20px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
margin: 30px;
background-color: green;
}
box1、box2垂直方向距离为30px。
margin空白标签重叠
margin空白标签重叠：空白内容的P标签、div标签等也会重叠。
页面结构：
<div class="box1">
box1
</div>
<P></P>
<P></P>
<P></P>
<P></P>
<P></P>
<div class="box2">
box2
</div>
css样式：
.box1{
width: 100px;
height: 100px;
margin: 20px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
margin: 20px;
background-color: green;
}
p {
margin: 20px;
}
box1、box2垂直方向距离为20px。
margin传递
margin传递：在子容器和父容器顶部线相同时，上下margin会传递，左右margin不会传递。
解决方式也很简单把margin换成padding，在父容器添加padding也可以达到同样的效果。
页面结构：
<div class="box1">
<!-- 父元素 -->
<div class="box2">
<!-- 子元素 -->
<P></P>
</div>
</div>
css样式：
.box1{
margin: 0;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
p {
margin: 20px;
}
p标签margin值为20px时
将p标签margin值设为0时：
结语
到此本章就结束了，谢谢大家的观看！
如有问题欢迎各位指正
