相邻元素之间的margin合并问题

时间: 2018-03-08阅读: 1458标签: margin

任何元素都可以设置border 设置宽高可能无效 
行内元素设置padding,margin上下是无效的,左右是有效的

外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。

简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 


当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
          margin:0;
          padding:0;
          border:0;
        }

        #d1 {
          width:100px;
          height:100px;
          margin-top:20px;
          margin-bottom:20px;
          background-color:red;
        }

        #d2 {
          width:100px;
          height:100px;
          margin-top:10px;
          background-color:blue;
        }

    </style>
</head>

<body>

<div id="d1">
</div>

<div id="d2">
</div>

<p>请注意,两个 div 之间的外边距是 20px,而不是 30px(20px + 10px)。</p>
</body>
</html>


当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图: 

<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
          margin:0;
          padding:0;
          border:0;
        }

        #outer {
          width:300px;
          height:300px;
          background-color:red;
          margin-top:20px;
        }

        #inner {
          width:50px;
          height:50px;
          background-color:blue;
          margin-top:10px;
        }

    </style>
</head>
<body>
<div id="outer">
  <div id="inner">
  </div>
</div>
<p>注释:请注意,如果不设置 div 的内边距和边框,那么内部 div 的上外边距将与外部 div 的上外边距合并(叠加)。</p>
</body>
</html>

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。 
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并: 

如果这个外边距遇到另一个元素的外边距,它还会发生合并: 


解决垂直外边距合并问题

两个相邻元素之间的间隔,只有20px;如果我要实现两元素间的间隔是我理想的间隔,即30px,该如果实现呢?方法有以下两个:

给最后面的元素加上浮动(left/right)

给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block,所以要加上*display:inline;zoom:1即可解决IE6、7的bug;

.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}
.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}


当子元素都浮动或者display:inline-block时,外边距不再合并



    <!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box_a{
                width:50px;
                background:#f00; 
                display: inline-block;
        }
        .box_b{
                width:50px; 
                background:#f0f; 
                margin:50px;display: 
                inline-block;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box_a">

        </div>    
        <div class="box_b">

        </div>
    </div>
</div>
</body>
</html>

让a和b不在同一个bfc内

.box{
            border:1px solid red;
            width: 400px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        .b-box{
            overflow: hidden;
        }
<div class="box">
    <div class="a">我是a</div>
    <div class="b-box">
        <div class="b">我是b</div>
    </div>
</div>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/483

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广