html元素⽗⼦级，兄弟级元素的外边距合并问题⼀、⽗⼦级元素
通常，⼤盒⼦中嵌套⼩盒⼦，如果给⼩盒⼦添加margin-top属性，则会出现⼤盒⼦和⼩盒⼦⼀起向下移动的现象。
html的代码如下：
<div class="outer">
<div class="inner"></div>
</div>
css代码如下
<style type="text/css">
.outer{
width: 400px;
height: 400px;
background-color: teal;
}
.inner{
width: 200px;margin属性怎么用
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
效果图如下
效果并不是我们想要的，此时解决的⽅法如下：
1、给⽗级元素添加边框（border）
2、给⽗级设置over-flow：hidden属性
3、不给⼦级使⽤margin属性，给⽗级添加padding
4、给⼦级或者⽗级⼀⽅添加浮动
5、给⼦级或者⽗级⼀⽅添加绝对定位
6、给⼦级或者⽗级⼀⽅添加属性：display：inline-block;
⼆、兄弟级元素
1、兄弟元素之间，垂直⽅向外边距如果都是正数不会叠加，⽽会发⽣外边距合并现象，并且外边距最终会取数值较⼤的。
2、兄弟元素之间，垂直⽅向外边距如果有⼀个为负数，会叠加，和普通加减计算⼀样
3、兄弟元素之间，垂直⽅向外边距如果都为负数，不会叠加，⽽会发⽣外边距合并现象，并且外边距最终会取绝对值较⼤的。

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