目录

​​margin合并的场景​​

​​1. 相邻兄弟元素margin合并 ​​

​​2. 父级和第一个/最后一个子元素​​

​​阻止margin-top合并的方法​​

​​阻止margin-bottom合并的方法​​

​​3. 空块级元素的margin合并​​

​​阻止空div元素的margin合并​​

​​margin合并的计算规则​​

​​margin合并的重要意义​​

​​margin:auto的填充规则​​

​​margin失效的场景​​

 

margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的

margin合并的场景

内联替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。 

1. 相邻兄弟元素margin合并 

<template>
    <div>
        <p>第1行</p>
        <p>第2行</p>
    </div>
</template>
<style scoped>
    p {
        margin: 10px 0px;
    }
</style>

第1行的下margin和第2行的上margin发生了合并，最终两行的间的间距只有10px

 

2. 父级和第一个/最后一个子元素

<template>
    <div>
        <!--形式一-->
        <div class="father">
            <div class="son" style="margin-top:80px;">子元素有margin-top</div>
        </div>
        <!--形式二-->
        <div class="father" style="margin-top:80px;">
            <div class="son">父元素有margin-top</div>
        </div>
        <!--形式三-->
        <div class="father" style="margin-top:80px;">
            <div class="son" style="margin-top:80px;">父子元素都有margin-top</div>
        </div>
    </div>
</template>
<style scoped>
    .father {
        background: red;
        height: 100px;
    }

    .son {
        background: green;
        height: 20px;
    }
</style>

无论是父/子元素单独设置margin，还是都设置margin，margin都合并到了父元素上

css【详解】—— margin属性（含margin合并，margin：auto，margin失效）_边距

阻止margin-top合并的方法

满足以下任一条件即可

  • 父元素设置为块状格式化上下文元素；(如添加样式 overflow: hidden;)
  • 父元素设置border-top值；
  • 父元素设置padding-top值；
  • 父元素和第一个子元素之间添加内联元素进行分隔。

 

阻止margin-bottom合并的方法

满足以下任一条件即可

  • 父元素设置为块状格式化上下文元素；(如添加样式 overflow: hidden;)
  • 父元素设置border-bottom值；
  • 父元素设置padding-bottom值；
  • 父元素和最后一个子元素之间添加内联元素进行分隔；
  • 父元素设置height、min-height或max-height。

 

3. 空块级元素的margin合并

<template>
    <div class="father">
        <div class="son"></div>
    </div>
</template>
<style scoped>
    .father {
        overflow: hidden;
        background: red;
    }

    .son {
        margin: 10px 0;
    }
</style>

子元素的margin-top和margin-bottom合并，最终父元素的高度只有10px

 

阻止空div元素的margin合并

  • 设置垂直方向的border；
  • 设置垂直方向的padding；
  • 里面添加内联元素（直接Space键空格是没用的）；
  • 设置height或者min-height。

margin合并的计算规则

  • 两个正/负margin合并，取绝对值最大的margin, 如 20px和30px合并得到30px, -50px与-20px合并得到-50px
  • 一正一负的margin，则相加求和得到最终的margin，如 50px-20px = 30px , -50px+30px = -20px

margin合并的重要意义

大部分html标签都有默认的margin值（防止图文挤到一块），若无margin合并机制，标签间的间距就会很大，不利于图文信息的展示

margin:auto的填充规则

margin的'auto'是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。 

如果里面的元素尺寸大，水平方向auto计算后的负值会被当作0来处理，但垂直方向计算后的负值则会保留

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

.father {
　  width: 300px;
}
.son {
　  width: 200px;
　  margin-right: 80px;
　  margin-left: auto; 
}

最终.son的左边距20px、右边距80px

 

因margin的初始值大小是0，所以若只有margin-left: auto; 没有margin-right，则得到元素右对齐的效果

.son {
　  width: 200px;
　  margin-left: auto; 
}

 

（2）如果两侧均是auto，则平分剩余空间

         如常用的水平居中对齐效果

.main {
        width: 80%;
        margin: 10px auto;
    }

div在div中水平垂直居中的方法可以参考链接

margin失效的场景

  • display计算值inline的非替换元素的垂直margin是无效的
  • 表格中的tr和td元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。
  • 发生margin合并时，改变绝对值较小的margin是无效的，除非改变后，它的绝对值最大，或者符号相反
  • 绝对定位元素非定位方位的margin值“无效”
.box {
    position: absolute;
    top: 10%;
    left: 30%;
    margin-right: 30px;
}

 此时right和bottom值属于auto状态，也就是右侧和底部没有进行定位，此时，这两个方向设置margin值我们在页面上是看不到定位变化的。

  • 定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。
<div class="box">
　<div class="child"></div>
</div>
.box {
　  height: 100px;
}
.child {
　  height: 80px;
　  margin-bottom: 100px;
}

或

.box {
　  width: 100px;
}
.child {
　  width: 80px;
　  margin-right: 100px;
}

原因在于，若想使用margin属性改变自身的位置，必须是和当前元素定位方向一样的margin属性才可以，否则，margin只能影响后面的元素或者父元素。

 

例如，一个普通元素，在默认流下，其定位方向是左侧以及上方，此时只有margin-left和margin-top可以影响元素的定位。但是，如果通过一些属性改变了定位方向，如float:right或者绝对定位元素的right右侧定位，则反过来margin-right可以影响元素的定位，margin-left只能影响兄弟元素。

 

  • 鞭长莫及导致的margin无效
<div class="box">
　 <img src="mm1.jpg">
　 <p>内容</p>
</div>

.box > img {
　  float: left;
　  width: 256px;
}
.box > p {
　  overflow: hidden;
　  margin-left: 200px;
}
  • 内联特性导致的margin无效
<div class="box">
　 <img src="mm1.jpg">
</div>
.box > img {
　  height: 96px;
　  margin-top: -200px;
}