CSS中负边距(nagative margin)是布局中常常使用的一个技巧。仅仅要运用得当时常会产生奇异的效果。勘称CSS中的奇淫巧计，非常多CSS布局方法都依赖于负边距。掌握它对于前端童鞋来说还是非常重要的。
一、原理
文档流
百度百科中的定义：文档流是文档中可显示对象在排列时所占用的位置。将窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
(自己的理解是从头到尾依照文档的顺序，该在什么位置就在什么位置，也能够依照上面的意思理解，自上而下，自左到右的顺序)
那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是尾随者文档流的变化而变化的。看以下这幅图：
负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这样的偏移不同于相对定位。通过相对定位偏移后，其仍然会坚守着它原来占领的空间，不会让文档流的其他元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占领的空间，这样它后面文档流中的其他元素就会“流”过来填充这部分空间。还是通过样例来说明吧。如今我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么：
具体发生了什么变化自己体会体会，负的边距好像能减小元素在文档流中的尺寸一样，但其实。它的尺寸大小并没变，仅仅是文档流在计算元素位置的时候。会觉得负边距把元素的尺寸减小了。因此位置也就发生变化了。
所以，一切仅仅要是由文档流决定的东西，负边距就能起作用了。
总之中的一个句话，在文档流中，元素的终于边界是由margin决定的。margin为负的时候就相当于元素的边界向里收，文档流认的仅仅是这个边界。不会管你实际的尺寸是多少。
负边距对元素宽度的影响
负边距不仅能影响元素在文档流中的位置，还能添加元素的宽度！这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是能够的）。
比方下图的绿色部分是一个块状元素，它没有设定宽度。它被包裹在一个宽度为400px。且水平居中的父元素中。
如今给这个元素的设一个margin-right:-100px;
我们看到它的宽度的确变长100px;然后再给它设一个margin-left:-100px;
我们看到它变得更宽了。
怎么理解呢？子块状元素的宽度设置为width:auto;或者不设置（默认width:auto;）的时候，是会依据其margin边界来填充父元素的，若正常设置为margin:100px;那么子元素的宽度必定减小200px；反之若设置margin:-100px;那么其为了正常填充整个父元素其宽度须要添加200px。
二、应用
1、左右列固定。中间列自适应布局
此例适用于左右栏宽度固定。中间栏宽度自适应的布局。因为网页的主体部分一般在中间，非常多网页都须要中间列优先载入。而这样的布局刚好满足此需求。
CSS：
body{
margin: 0;
padding: 0;
min-width: 600px;
}
.container{
width: 100%;
float: left;
}
.main{
margin: 0 210px;
background-color: #1B6540;
height: 200px;
}
.left,.right{
float: left;
width: 200px;
height: 200px;
background-color: #4FA46B;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
HTML：
<div class="container">
<div class="main">
main
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
效果：
2、去掉列表右边框
项目中常常会使用浮动列表展示信息。为了美观通常为每一个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法一般是为最右端的li加入class，设置margin-right:0; 这样的方法须要动态推断为哪些li元素加入class，麻烦！
。！利用负margin就能够实现以下这样的效果：
CSS：
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
.test{
width: 320px;
margin: 20px auto;
background-color: #1B6540;
}
.test ul{
margin-right: -10px;
}
.test ul li{
float: left;
width: 100px;
height: 100px;
background-color: #4FA46B;
margin-right: 10px;
margin-bottom: 10px;
}
.clearfix:after{
content: "";
height: 0;
display: block;
clear: both;
}
HTML：
<div class="test clearfix">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>
效果：
3、负边距配合绝对定位水平垂直居中
这个前提条件是已知子元素的宽高。
CSS：
.container{
width: 500px;
height: 500px;
margin: 20px auto;
background-color: #1B6540;
position: relative;
}
.inner{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: #4FA46B;
}
HTML：
<div class="container">
<div class="inner">
</div>
</div>
4、多列等高
此例关键是给每一个框设置大的底部内边距，然后用数值类似的负外边距消除这个高度。
这会导致每一列溢出容器元素，假设把外包容器的overflow属性设为hidden，列就在最高点被裁切。
CSS：
*{
padding: 0;
margin: 0;
}
.container{
overflow: hidden;
width: 500px;
margin: 20px auto;
}
.left,.mid,.right{
margin-bottom: -200px;
padding-bottom: 200px;
}
.left {
float: left;
width: 100px;
background: #4FA46B;
}
.mid {
float: left;
width: 300px;
background: #1B6540;
}
.right {
float: right;
width: 100px;
background: #4FA46B;
}
p {color: #FFF;text-align: center}
HTML：
<div class="container">
<div class="left">
<p style="height:50px">height:50px</p>
</div>
<div class="mid">
<p style="height:100px">height:100px</p>
</div>
<div class="right">
<p style="height:200px">height:200px</p>
</div>
</div>
效果：
5、去除列表最后一个li元素的border-bottom
列表中我们常常会加入border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观。往往要移除。
CSS：
*{padding: 0;margin: 0;}
ul,li{list-style: none;}
.container{
width: 500px;
margin: 20px auto;
background-color: #84D0AA;
border: 3px solid #FF6798;
z-index: 999;
overflow: hidden;
}
ul li{
height: 30px;
line-height: 30px;
border-bottom: 1px dotted #fff;
padding: 5px;
margin-bottom: -1px;
}
HTML：
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
效果：
注意：当中具有边框的父元素假设不加overflow:hidden;会导致出现边框与子元素li标签的边框重叠的情况，例如以下：
我相信这个微小的瑕疵会逼死无数像我这样的强迫症患者..
具体资源能够參考：The Definitive Guide to Using Negative Margins
有什么好的问题或者资源欢迎补充
来源：https://www.cnblogs.com/liguangsunls/p/7213920.html