CSS

外边距合并的问题 及 相应的解决办法

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:

嵌套盒子重叠.png
解决办法:

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:

相邻盒子重叠.png
解决办法:
上一篇下一篇

猜你喜欢

热点阅读