外边距合并的问题 及 相应的解决办法
2019-03-25 本文已影响0人
老95
在网页布局中,有时需要设置css设置外边距(margin), 但是会出现css外边距合并(即重叠)的情况。什么是外边距合并的情况呐?怎么解决呐?
外边距合并
css外边距合并(重叠)是指两个垂直相邻的块级元素,当上下两个边距相遇时,外边距会产生重叠的现象,且重叠后的外边距等于其中较大者。
1、盒子嵌套
HTML:
<!-- 嵌套 -->
<div class="box">
<div class="container">
</div>
</div>
CSS:
.box {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 20px;
/* padding-top: .1px; */
/* overflow:hidden; */
/* overflow:auto; */
}
.container {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
VIEW:
解决办法:
- 第1种方法:给外部盒子设置内边距(padding-top:.1px;)即可。
- 第2种方法:给下面的盒子设置overflow( overflow: hidden; 或 overflow: auto; )即可。
2、相邻盒子
HTML:
<!-- 相邻 -->
<div class="l_box">
</div>
<div class="l_container">
</div>
CSS:
.l_box {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 20px;
}
.l_container {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
/* position: absolute; */
/* float: left; */
/* display:inline-block; */
}
VIEW:
解决办法:
- 第1种方法:给下面的盒子设置定位(position:absolute;)即可。
- 第2种方法:给下面的盒子设置浮动(float:left;)即可。
- 第3种方法:将其中任一个盒子设置为行内块元素(dispaly:inline-block;)即可。