注：以下實驗的元素均為塊級元素，inline-block和inline本身對margin某些方向上都是無效的，所以這里不予討論。
margin-left或者margin-right為負數
當塊元素width:auto時，margin-left和margin-right會增加元素的寬度
當有具體width時，margin-left向左移動,
margin-right 減少css的讀取寬度 如下圖 （也就是后面的元素會擠進來）
margin-top或者margin-bottom為負數時
高度一般都自適應或者精確的值，體現的形式是一樣的
margin-top為負值 是向上移動
margin-bottom為負值 減少css的讀取高度（后面的元素擠上來）
一張圖解釋
總結
除了塊元素未設置寬度會增加寬度外，其他的幾種情況都是反向移動或者減少css讀取的值。
實際應用
雙飛翼布局 （三列布局，兩邊定寬，中間不定）
原理，用float在同一行， 中間元素給100%, left元素 margin-left: -100%移動到最左邊，right元素margin-left: -100px;
html,body{
height: 100%;
}
body{
margin: 0;
}
.main{
width: 100%;
height: 100%;
float: left;
}
.main .in{
margin: 0 110px;
background-color: pink;
height: 100%;
}
.left,.right{
height: 100%;
width: 100px;
float: left;
background-color: lightgreen;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -100px;
}
<body>
<div class="main">
<div class="in"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
三欄等高布局 (文字不定，但是等高)
原理： 父級給overflow:hidden; 里面的元素用padding-bottom: 1000px; margin-bottom:-1000px; 給padding和overflow:hidden是為了讓高度一致，margin-bottom:1000px;去消除這個高度，就是看起來有那么高，其實沒有，因為margin-bottom為負值的原因
body{
margin: 0;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
overflow: hidden;
width: 100%;
height: 100%;
}
.main{
margin: 0 110px;
background-color: lightgreen;
}
.left{
width: 100px;
float: left;
background-color: pink;
}
.right{
width: 100px;
float: right;
background-color: pink;
}
.main,.left,.right{
margin-bottom: -9999px;
padding-bottom: 9999px;
}
<body>
<ul class="list">
<li class="left">左側文字比較少</li>
<li class="right">右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多</li>
<li class="main">中間文字比較少</li>
</ul>
</body>
去除列表右邊框
原理：外層list元素未設置寬度（width:auto），margin-right:-10px;這會導致外層list元素右邊增加寬度10px，那么每行的最后一個元素margin-right:10px就剛好list原來的邊界，即新增的寬度與一行最后一個元素margin-right:10px相互抵消.
.container{
margin:0 auto;
width: 500px;
border: 1px #ccc solid;
margin-bottom: 20px;
}
.list{
overflow: hidden;
margin-right: -10px;
}
.list li{
width:92px;
height: 92px;
background-color: #ccc;
margin-bottom: 20px;
float: left;
margin-right: 10px;
}
<div class="container">
<ul class="list">
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
<li>我是一個列表</li>
</ul>
</div>
