负margin，以及margin重叠-优快云博客

margin属性给元素设置（上下左右）的外边距，可以为负值，百分比

margin的百分比是相对于父元素的宽度来的
margin的top和bottom属性对非替换内联元素无效

margin重叠： ==块级元素==的上边距和下边距会发生重叠，与相邻的margin重叠，折叠后的值为折叠前两个值中较大的一个。以下几种情况会出现折叠

相邻的元素之间：同一个bfc下的相邻块级元素
父元素和第一个或者最后一个子元素之间：
1. 在父元素和第一个子元素之间不存在border、padding、行内内容，也没有创建bfc，或者清除浮动将两者的margin-top分开
2. 在父元素与最后一个子元素之间不存在border、padding、行内内容、height、min-height、max-height将两者的margin-bottom分开，那么这两对外边距之间会产生折叠。**
空的块级元素：一个块级元素中不包含任何内容，并且在其margin-top与margin-bottom之间没有border、padding、行内内容、height、min-height将两者分开，则该元素的上下外边距会折叠。

参考资料：外边距合并

margin负值的情况：

2个block块负margin的情况

负的margin-top会往上移动，并且下面的元素会整体跟着移动
正的margin-top就是把content往下移动
负的margin-bottom会出现下面元素往上移动，覆盖的情况
正的margin-bottom是拉大和下面元素的距离

上面的移动都是整体的文档流移动，覆盖的话只会出现背景的覆盖，内容不会被覆盖

因为是上下margin，所以还是会有margin重叠的，重叠的2个margin都是负值时，取得是最小的负值，eg：

<div class="wrapper">
  <div class="box1">box1box1</div>
  <div class="box2">box2box2box2</div>
</div>
复制代码

.box1 {
    margin-bottom: -20px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
    background: green;
}
.box2 {
    margin-top: -10px;
    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
    background: red;
}
复制代码

box1和box2会出现margin重叠，重叠的margin为-20px，所以box2会有20px的部分重叠到box1，如果不发生融合，那么重叠的margin就是-30px，box2会有30px的部门重叠到box1

对于一正一负的margin，eg：

<div class="wrapper">
  <div class="box1">box1box1</div>
  <div class="box2">box2box2box2</div>
</div>
复制代码

.wrapper {
  overflow: hidden;
}
.box1 {
    margin-bottom: -20px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
    background: green;
}
.box2 {
    margin-top: 10px;
    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
    background: red;
}
复制代码

因为box1的margin-bottom为-20px，所以box2会往上跑20px，但是box2的margin-top是10px就把box2往下推了10px，所以就重叠了-10px，也就是boax2往上跑10px

负margin-left和负margin-right是不会发生重叠的

负margin-left和负margin-right不会导致元素位置变化，会导致子元素位置变化，eg：

<div class="wrapper">
  <div class="box1"><div>box1box1</div></div>
  <div class="box2">box2box2box2</div>
</div>
复制代码

.wrapper {
  overflow: hidden;
}
.box1 {
    height: 100px;
    margin-left: -10px;
    margin-right: -10px;
    background: green;
}
.box2 {
    height: 50px;
    margin-left: -20px;
    margin-right: -20px;
    background: red;
}
复制代码

实际上子元素的宽度往左右扩展了相应的大小

2个inline块的负margin的情况

非替换行内元素，margin-top和margin-bottom是无效的，所以也没有什么margin重叠，对于margin-left，margin-right，eg：

<div>
 <span class="inline1">inline12345678</span><span class="inline2">inline23456789</span>
</div>
复制代码

.inline1 {
  margin-left: -10px;
  background: green;
}
.inline2 {
  margin-left: -10px;
  background: red;
}
复制代码

inline元素的-margin-left和-margin-right会改变元素位置，但是不会有margin重叠 对于inline元素

负margin-left就是往左边移动，并且后面元素跟着一起移动
负margin-right会导致后面元素覆盖
正的margin-left就是往右移动
正的margin-right就是拉大和旁边元素的距离

上面的移动都是整体的文档流移动，覆盖的是背景的覆盖，内容也覆盖

2个inline-block块的负margin情况

负margin-left和负margin-right结果等同inline
负margin-top和负margin-bottom和vertical-align有关

vertical-align设置如下值：

baseline：那么-margin-top只能向上移动到baseline - 1em，margin-bottom也只能被后面覆盖到baseline
middle:
1. -margin-top向上移动到父元素height - 1em的位置，后面元素跟着移动，再加大负值，后面元素将不再跟着移动，本元素向上移动。
2. -margin-bottom也是后面覆盖到height - 1em的位置，后面元素不再往上覆盖，然后本身元素开始向下移动
top:
1. -margin-top向上移动到父元素height - 1em的位置，后面元素跟着移动，再加大负值，后面元素将不再跟着移动，本元素向上移动。
2. -margin-bottom也是后面覆盖到height - 1em的位置，后面元素不再往上覆盖，然后本身元素也不再移动，-margin-bottom失效
bottom:
1. -margin-top向上移动到父元素height - 1em的位置，后面元素跟着移动，再加大负值，后面元素将不再跟着移动，本元素也不再移动，-margin-top失效
2. -margin-bottom也是后面覆盖到height - 1em的位置，后面元素不再往上覆盖，然后本身元素开始向下移动

元素覆盖：当inline（inline-block）和block发生覆盖的时候，inline背景在上，内容后面覆盖前面

参考资料：负margin总结

参考资料：baseline原理