盒⼦模型——margin
padding属性定义的内边距⽤于内部扩展距离。如果需要向外扩展盒⼦于周围盒⼦的距离，则需要使⽤margin属性.
margin属性⽤于定义盒⼦边框与周围其它盒⼦之间的空⽩区域，该空⽩区域称为盒⼦的外边距
margin: 0 auto;⽤来设置元素在浏览器窗⼝⽔平居中
padding是外边距还是内边距⽗⼦元素边距的定义
⽗⼦元素的边距既可以使⽤padding定义，也可以使⽤margin定义。
当⽗⼦边距定义为内边距时，应在⽗级元素中使⽤padding属性设置内边距；
当⽗⼦边距定义为外边距时，则应在⼦级元素中使⽤margin属性设置外边距；
盒⼦外边距的合并
1. 相邻元素外边距合并
两个相邻标准流会稽元素，上⾯元素的margin-bottom边距会和下⾯元素的margin-top边距合并。
如果两个外边距全为正值，合并后的外边距等于margin-bottom边距和margin-top边距中最⼤的那个边距。这称为margin的塌陷如果两个外边距存在负值，合并后的外边距⾼度等于这些发⽣合并的外边距的和。
如果和为负数，相邻元素在垂直⽅向上发⽣重叠，重叠深度等于外边距和的绝对值
当和为0时，两个块级元素⽆缝衔接
2. 包含（⽗⼦）元素外边距合并
合并条件：
当⽗元素没有内容或内容在⼦元素的后⾯且没有内边距或没有边框时，⼦元素的上外边距将和⽗元素的上外边距合并为⼀个上外边框，且值为最⼤的那个上外边距
<div class="a">A</div>
<div class="b">
<div class="c">C</div>
B
</div>
div{
height: 100px;
font-size: 36px;
color: #000;
text-align: center;
}
.a{
width: 100px;
background: pink;
}
.b{
width: 200px;
height: 160px;
background: yellow;
}
.c{
width: 100px;
background: #aee8ae;
}
上⾯没有设置任何边距，现在希望B和C之间有⼀个20px的边距。
那就直接设置c的margin-top: 20px；不就⾏了吗？
.c{
width: 100px;
margin-top: 20px;
background: #aee8ae;
}
结果是下⾯这样：C和B并没有边距，⽽是A和B有了间距。为什么呢？因为B和C是包含关系，B的内容在C盒⼦之后，且没有边框和内边距**。所以B和C的外边距发⽣合并。
**怎么解决呢？**打破⽗⼦元素合并的条件即可：
可以给⽗级盒⼦B加内边距
.b{
width: 200px;
height: 160px;
padding-top: 0.1px;
background: yellow;
}
也可以给⽗级盒⼦B添加边框
.b{
width: 200px;
height: 160px;
border: 1px solid red;/* 给⽗级盒⼦添加边框 */
background: yellow;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。