外边距合并问题
父子级
父元素会随着子元素一起拥有外边距。
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中外边距合并问题的全部内容,有更好的欢迎留言!