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;
			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、兄弟元素之间，垂直方向外边距如果都为负数，不会叠加，而会发生外边距合并现象，并且外边距最终会取绝对值较大的。