css的外边距合并问题的解决方法

css的外边距合并问题的解决方法

父子级

	<!--结构  -->
	<div class="outer">
		<div class="inner"></div>
	</div>

	/*样式*/
	<style>
		.outer{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: black;
			margin-top: 20px;
		}
	</style>

我的想要的结果应该是

结果是

解决办法:
1.给父元素加上overflow:hidden;
2.给父元素加上边框border;
3.使父元素和子元素浮动(float);
4.给父元素或子元素加上绝对定位position:absolute;
5.给父元素或子元素加display:inline-block
6.给父元素设置padding-top;
兄弟级

	<!--结构  -->
	<div class="one"></div>
	<div class="two"></div>

	/*样式*/
	<style>
		.one{
			width: 100px;
			height: 100px;
			background-color: pink;
			margin-bottom:10px;
		}
		.two{
			width: 100px;
			height: 100px;
			background-color: black;
			margin-top:20px;
		}
	</style>

结果是(两者相隔20px):

想要结果(两者相隔30px):

问题描述:
1.两个外边距都是正数,会合并,取值较大的一方
2.两个外边距都是负数,会合并,取绝对值较大的一方
3.一个外边距为正,另一个为负, 会叠加.
解决方法:
1.给two设置浮动(float:left);
2.给one或two设置display:inline-block;