CSS中的外边距合并问题

水深无声 2023-03-05 15:58 4阅读 0赞

# 外边距合并问题 #

## 父子级 ##

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

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

##### html代码 #####

##### 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代码 #####

##### 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中外边距合并问题的全部内容，有更好的欢迎留言！