码迷,mamicode.com
首页 > 其他好文 > 详细

margin 重叠现象

时间:2014-08-08 16:36:36      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   os   strong   2014   ar   div   

1、写两个div,在上面div有 margin-bottom 的情况下效果是这样:

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <title>margin 重叠现象</title>
    <style type="text/css">
    .top {
      height: 100px;
      background: #795f98;
      margin-bottom: 20px;
    }
    .bottom {
      height: 100px;
      background: #7f9140;
    }
    </style>
</head>
<body>
    <div class="dadDiv">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

bubuko.com,布布扣


2、那如果只让下面的div有 margin-top 的情况下是怎样呢?

.top {
  height: 100px;
  background: #795f98;
}
.bottom {
  height: 100px;
  background: #7f9140;
  margin-top: 20px;
}


是的,效果没变。


3、再来,把刚刚的样式都写上呢,两个div会距离得更远么?

.top {
  height: 100px;
  background: #795f98;
  margin-bottom: 20px;
}
.bottom {
  height: 100px;
  background: #7f9140;
  margin-top: 20px;
}


我的答案是 效果还是不变,即两个div上下间距还是20个像素,不信?自己拿尺子测量去吧~



margin 重叠现象,布布扣,bubuko.com

margin 重叠现象

标签:style   http   color   os   strong   2014   ar   div   

原文地址:http://my.oschina.net/cobish/blog/299318

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!