一、父子级元素
通常,大盒子中嵌套小盒子,如果给小盒子添加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;
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、兄弟元素之间,垂直方向外边距如果都为负数,不会叠加,而会发生外边距合并现象,并且外边距最终会取绝对值较大的。