相邻元素之间的margin问题：

最新推荐文章于 2023-09-26 14:36:47 发布

UNDERCOVERj

最新推荐文章于 2023-09-26 14:36:47 发布

阅读量6.4k

点赞数 3

分类专栏： html-css 文章标签： html css 布局合并

本文链接：https://blog.csdn.net/github_37037281/article/details/55505825

版权

html-css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

任何元素都可以设置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>

UNDERCOVERj

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
相邻元素之间的margin问题：

任何元素都可以设置border 设置宽高可能无效行内元素设置padding，margin上下是无效的，左右是有效的外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将
复制链接

扫一扫