margin屬性在實際中非常常用，也是平時踩坑較多的地方。margin折疊部分相信不少人都因為這樣那樣的原因中過招。margin負值也是很常用的功能，很多特殊的布局方法都依賴於它。它看似簡單，實際上卻蠻復雜，本文就margin負值作詳細介紹和梳理。
雖然margin可以應用到所有元素，但display屬性不同時，表現也不同
【1】block元素可以使用四個方向的margin值
【2】inline元素使用上下方向的margin值無效
【3】inline-block使用上下方向的margin負值看上去無效
[注意]inline-block使用上下方向的margin負值只是看上去無效，這與其默認的vertical-align:baseline有關系，當垂直對齊的屬性值為其他值時，則會顯示不同的視覺效果
margin負值並不總是後面元素覆蓋前面元素，它與元素display屬性有關系
【1】兩個block元素重疊時，後面元素可以覆蓋前面元素的背景，但無法覆蓋其內容
【2】當兩個inline元素，或兩個line-block元素，或inline與inline-block元素重疊時，後面元素可以覆蓋前面元素的背景和內容
【3】當inline元素與block元素重疊時，inline的元素覆蓋block元素的背景和內容
【4】當inline-block元素與block元素重疊時，inline-block元素覆蓋block元素的背景，但無法覆蓋其內容
【1】block元素與浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示
【2】inline或inline-block元素與浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示
【1】定位元素(position不為static)覆蓋其他元素的背景和內容
【2】將relative屬性值應用於inline或inline-block元素後，由於無法改變其行內元素的本質，所以其上下margin依然存在問題
【1】水平垂直居中
由於margin的百分比相對於包含塊的寬度，所以在需要居中的元素外面套一個空的<div>元素，並且利用absolute的包裹性，使該元素的寬高等於需要定位的元素的寬高
.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%;
}
<div class="box">
<div class="out">
<div class="in">測試內容</div>
</div>
</div>
【2】列表項兩端對齊
在列表項外面包一層元素，使用margin負值來將最後一個列表項拉回來
ul{
margin: 0;
padding: 0;
list-style:none;
}
.box{
width: 200px;
background-color: pink;
}
.list{
overflow: hidden;
margin-right: -10px;
}
.in{
float: left;
width: 60px;
height: 100px;
background-color: lightgreen;
margin-right: 10px;
}
<div class="box">
<ul class="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
</ul>
</div>
【3】三欄自適應布局
中間的主體使用雙層標簽，外層<div>寬度100%顯示，並且浮動，內層<div>為真正的主體內容，含有左右210px的margin值。左欄和右欄都采用margin負值。左欄左浮動，margin-left為-100%，正好使左欄位於頁面左側。右欄左浮動，大小為其本身的寬度200px
html,body{
height: 100%;
}
body{
margin: 0;
}
.main{
width: 100%;
height: 100%;
float: left;
}
.main .in{
margin: 0 210px;
background-color: pink;
height: 100%;
}
.left,.right{
height: 100%;
width: 200px;
float: left;
background-color: lightgreen;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
<body>
<div class="main">
<div class="in"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
【4】三欄等高布局
給每欄設置大的底部內邊距，然後用數值相同的負外邊距消除這個高度，然後在外層容器中設置overflow:hidden
body{
margin: 0;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
overflow: hidden;
width: 100%;
height: 100%;
}
.main{
margin: 0 210px;
background-color: lightgreen;
}
.left{
width: 200px;
float: left;
background-color: pink;
}
.right{
width: 200px;
float: right;
background-color: pink;
}
.main,.left,.right{
margin-bottom: -9999px;
padding-bottom: 9999px;
}
<ul class="list">
<li class="left">左側文字比較少</li>
<li class="right">右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多</li>
<li class="main">中間文字比較少</li>
</ul>
</body>
好的代碼像粥一樣，都是用時間熬出來的