margin的各种问题

margin纵向重叠问题

        这个现象出现的原因是，在早期，网页主要是为了展示文字信息，所以为了让页面的结构更美观，相邻元素的margin-top和margin-bottom会发生重叠，空的<p>标签也会被重叠。

margin负值

先说结论：

margin-top和margin-left为负值，元素向上、向左移动。

margin-right为负值，右侧元素左移，自身不受影响。

margin-bottom为负值，下方元素上移，自身不受影响。

为什么会出现这种现象？

试想一下，如果你在一片空白的页面展示一个50px的盒子，他会在在哪里展示，有点编程经验的都会知道，那个盒子会展示在页面的左上角，这是由于我们的浏览习惯，所以在一开始设计的时候，页面的流向就设置为了向左向上流，负margin也是受水流影响的。

负margin是为了缩短框之间的距离，所以设置了left/top的负margin，自身就会顺着水流靠近左/上的框，设置了right/bottom的负margin，自身无法“逆水而上”，所以只能把右/下的框拉过来，达到缩短彼此距离的目的。

应用

水平垂直居中

　　如果要居中的元素的宽/高是不变的或者说是确定的，比如width/height=100px，那么设置absolute的top/left=50%，然后margin-left/margin-top=-50px即可

　　如果要居中的元素的宽/高是不确定的，这时margin负值就不能使用具体的px了，可以使用百分比。但由于margin的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用absolute的包裹性，在需要居中的元素外面套一个空的<div>元素即可。

<style>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            border: 2px solid black;
        }
​
        .out {
            position: absolute;
            left: 50%;
            top: 50%;
        }
​
        .in {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-left: -50%;
            margin-top: -50%;
        }
    </style>
    
    <div class="box">
        <div class="out">
            <div class="in">测试内容</div>    
        </div>    
    </div>

效果如图：