具有嵌套关系的两个div间的margin合并问题

两个嵌套div边距合并问题解决

（边距合并不仅仅是上边距，下边距也一样会被合并。即 margin-top 和 margin-bottom）

	<div class="outer">
		<div class="inner"></div>
	</div>

---

1. 给父元素添加属性 overflow:hidden

.outer{
			width: 200px;
			background-color: yellowgreen;
			overflow:hidden;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
		}

2. 给父元素添加 padding-top 值和 padding-bottom 值

同时需要把子元素的上下 margin 设置成 0

.outer{
			width: 200px;
			background-color: yellowgreen;
			padding-top: 10px;
			padding-bottom: 10px;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:0px auto;
		}

3. 给父元素添加border值

.outer{
			width: 200px;
			background-color: yellowgreen;
			border: 1px solid transparent;
			box-sizing: border-box;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
		}

4. 给父元素或者子元素声明浮动float

父元素声明浮动

.outer{
			width: 200px;
			background-color: yellowgreen;
			float: left;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
		}

子元素声明浮动
这里如果给子元素设置了浮动，必须给父元素设置 overflow: hidden; 清除子元素浮动对父元素产生的影响；不设置的话会出现父元素没有高的情况。
当然，如果你的给父元素设置了高的话，就可以不用加 overflow: hidden;

.outer{
			width: 200px;
			background-color: yellowgreen;
			overflow: hidden;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
			float: left;
		}

5. 给父元素或子元素声明绝对定位：position:absolute

父元素设置绝对定位

.outer{
			width: 200px;
			background-color: yellowgreen;
			position: absolute;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
		}

子元素设置绝对定位

.outer{
			width: 200px;
			background-color: yellowgreen;
			height: 120px;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
			position: absolute;
		}

6. 给父元素添加属性：positon:relative，给子元素声明绝对定位 position:absolute

让父元素高固定

.outer{
			width: 200px;
			background-color: yellowgreen;
			height: 120px;
			position: relative;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
		}

7. 给父元素或者子元素设置 display:inline-block;

给子元素设置 inline-block
同时给父元素设置 font-size:0;
因为默认情况下 inline-block 元素会有4px的间距。

.outer{
			width: 200px;
			background-color: yellowgreen;
			font-size: 0;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
			display: inline-block;
		}

给父元素设置 inline-block

.outer{
			width: 200px;
			background-color: yellowgreen;
			display: inline-block;
		}
.inner{
			width: 100px;
			height: 100px;
			background-color: #655;
			margin:10px auto;
		}