margin总结-CFANZ编程社区

参考张鑫旭——《CSS世界》

margin不具有兼容性问题，也就是在各个浏览器下表现一致

margin实现等高布局（margin负值应用）

先看效果：
在这里插入图片描述
代码：

//html
	<div style="overflow: hidden;">
        <div class="div-left">
            <p>111111</p>
            <p>222222</p>
        </div>
        <div class="div-right">第二栏</div>
    </div>
//css
  		.div-left,
        .div-right {
            float: left;
            width: 40%;
            margin-bottom: -1000px;
            padding-bottom: 1000px;
        }

        .div-left {
            background-color: aqua;
        }

        .div-right {
            background-color: yellowgreen;
        }

解析：

margin百分比

和padding一样，margin的百分比无论是水平还是垂直方向都是相对于宽度计算
和padding不同的是，margin在垂直方向上不会影响元素内部尺寸，且margin存在合并现象。如下所示分别使用padding：50%和margin：50%实现的矩形的区别：

使用padding：50%呈现为一个正方形

    <div style="width: 300px;background-color: lightblue;">
        <div style="padding: 50%;"></div>
    </div>

在这里插入图片描述
3. 使用margin：50%呈现为宽高比为2:1的矩阵

    <div style="width: 300px;overflow: hidden;background-color: lightcoral;">
        <div style="width: 0;margin: 50%"></div>
    </div>

在这里插入图片描述
之所以这里是个2:1的长方形，是因为空的div元素的margin-top和margin-bottom合并了

margin合并

块级元素（不包含浮动和绝对定位）且和文档流（writing-mode）垂直的方向上可能发生合并，
会发生margin合并的几种情况：

margin：auto

margin:auto的填充规则如下。

只是需要注意，触发margin:auto的前提条件是width或height为auto时，元素是具有对应方向的自动填充特性的，所以垂直方向上margin:auto并不能实现居中的效果（块级元素水平方向自动填充，垂直为0）
因此，一种实现水平垂直居中的方式如下：

 <div style="height: 100px;margin-top: 20px;position: relative;">
        <div style="background-color: aquamarine;margin: auto;
        position: absolute;left: 0;right: 0;top: 0;bottom: 0;
        width: 100px;height: 50px;
        "></div>
    </div>

内部的div的尺寸表现为“格式化宽度和格式化高度”，和正常流一样，同属于自动填充父级元素的可用尺寸。但如果里面元素的尺寸如果超过外部尺寸，说明没有剩余可用空间了，会被当作0来处理，也就是等于没有设置margin属性值

关于margin合并，还有几个注意点：

替换元素不管display设置为什么，其margin值始终有效，且不会发生合并！
绝对定位元素非定位方向的margin值无效。例如设置left和top，则margin-right和margin-bottom就无效
定高（定宽）的父元素，子元素的margin-bottom/right不会影响父元素的外边距（不会合并现象），原因和上一条相同，默认流下，元素的定位方向是左侧和上方。除非使用了float或绝对定位等方式改变了方向。