CSS中的外边距合并问题

外边距合并问题

父子级

父元素会随着子元素一起拥有外边距。

a、给父元素添加一个overflow:hidden;
b、把父元素设置为IE盒子,然后加padding
c、给父元素加border
d、给父元素或者是本身加上浮动float
e、给父元素或者是本身加上绝对定位absolute
f、给父元素或者是本身加上固定定位fixed
g、给父元素或者是本身加上display:inline-block;

html代码

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

CSS代码

/*出现的情况：给子元素添加了margin-top为20px；为了使父元素不受子元素的影响而进行偏移，有如下几种方法*/
	.outer{
			width: 200px;
			height: 200px;
			background-color: pink;
			/*方法一*/
			/*overflow: hidden;*/
			/*方法二*/
			/*box-sizing: border-box;
			padding-top: 20px;*/
			/*方法三*/
			/*border: 1px solid red;*/
			/*方法四*/
			/*float: left;*/
			/*方法五*/
			/*position: absolute;*/
			/*方法六*/
			/*position: fixed;*/
			/*方法七*/
			display: inline-block;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-top: 20px;
		}

兄弟级

**水平方向上外边距叠加。

a、垂直方向上外边距如果都为正数，那么取更大的值，小的值则被合并掉
b、垂直方向上外边距如果都为负数，取绝对值较大的值
c、垂直方向上外边距如果一个为正数，一个为负数，那么会叠加

这个记住就好了，可以自己写几个例子进行试一试，方便记忆。

html代码

<div class="one"></div>
<div class="two"></div>

CSS代码

*{
		margin: 0px;
		padding: 0px;
	}
	.one{
		width: 100px;
		height: 100px;
		background-color: pink;
		/*display: inline-block;*/
		/*float: left;
		margin-right: 20px;*/
		margin-bottom: 10px;

	}
	.two{
		opacity: 0.3;
		/*display: inline-block;*/
		/*float: left;
		margin-left: 20px;*/

		margin-top: -20px;
		width: 100px;
		height: 100px;
		background-color: coral;
	}

以上就是css中外边距合并问题的全部内容，有更好的欢迎留言！