# margin系列之內秀篇
>原作者：doyoe
原文鏈接：http://blog.doyoe.com/2013/12/06/css/margin%E7%B3%BB%E5%88%97%E4%B9%8B%E5%86%85%E7%A7%80%E7%AF%87/
## 最Cool的利器
一樣東西在不同的場景，不同的人手里，所能做的事會有很大不同。我深切的以為 `margin` 絕對是 CSS 中最有能力的利器之一，不知大家以為然否？
前面幾篇文章大概的講了一些關于 `margin` 的特性，所以本篇會聊聊 `margin` 的實際應用場景，也算讓自己休息一下，不用再講知識點。
## 有個很典型的需求
相信接下來這個需求，你十有八九實現過，甚至實現過多次，來看 `圖一`：
我們看到這個圖中，有個列表，每個列表項下面都有一條線，但最后一項沒有。我們預期的代碼是：
```html
<div id="demo">
<h3>標題列表</h3>
<ul>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
</ul>
</div>
```
如果每項都有條底線，我們可以很簡單的做到，如下：
```css
#demo li{
border-bottom: 1px solid #ccc;
}
```
然而為了處理最后一項，事情就變得有點糾結了。我知道肯定有人要說，我們有 `:first-child`, `:nth-last-child(n)`, `:nth-last-of-type(n)` 之類的CSS3選擇符，要處理這個，太easy了。恩，我也不得不承認，CSS3確認讓事情變得簡單多了。但我們可能需要面對一些國情，因為需要照顧一些弱小者，比如IE6-8，它們離CSS3的世界太遠。
## 傳說中的first/last解決方案
所以我們需要找別的方法，于是這樣的代碼，相信你見過無數遍了：
```html
<div id="demo">
<h3>標題列表</h3>
<ul>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
<li>» 有點累想歇一下好長一個標題</li>
<li class="last">» 有點累想歇一下好長一個標題</li>
</ul>
</div>
```
我沒亂說，你肯定見到類似的代碼千百遍了？是的，它確實能夠解決我們的問題，請看 `DEMO1` 傳說中的first/last解決方案，代碼如下：
```css
#demo .last{
border-bottom: 0 none;
}
```
使用特殊的class來單獨處理這項，但我不是很喜歡這樣的code，原因大致有：
- 需單獨定義一個差異化的class；
- 不利于數據循環輸出，因為還得判斷是否最后一項；
## margin的神來之筆
基于以上的原因，肯定會有其它的解決方案出現，這時margin無疑是非常不錯的選擇，來看代碼：
```css
#demo{
overflow:hidden;
}
#demo ul{
margin-bottom: -1px;
}
```
CSS代碼如上，HTML代碼當時使用開篇時的那段，結果請看：`DEMO2` [margin解決方案](http://demo.doyoe.com/css/margin/text-list.htm)
是不是很Cool，完全避免了上述的問題，并且代碼量很小。至于為什么可以這樣實現，前幾篇文章里有說過，margin是互動的，能影響其上下文的布局。本例中，當 ul `margin-bottom:-1px` ，其本身的高并不會被改變，但其相鄰的元素則會往上 `1px` ，這時相鄰的元素即其包含塊 #demo，所以給 #demo `overflow:hidden` ，就直接將那 1px 的邊框給裁剪掉了。
再來個相似的需求
看看下述的 `圖二`，這應該也是一種非常常見的圖片列表需求：
只關注圖片之間的間隙，我們發現3張圖片，卻只有2個間隙。不論你是用 `margin-left` 或者說是 `margin-right` ，都無法直接達成這個需求。
當然，可以像 `DEMO1` 那樣給第一個或者最后一個添加一個特殊類 first/last 來解決。但這種方式剛被說不喜歡，所以想想用 `margin` 方式吧，思路應該說是和 `DEMO2` 毫無二致。來看代碼：
### CSS
```css
#demo{
overflow:hidden;
}
#demo ul{
margin-right:-10px;
}
```
### HTML
```html
<div id="demo">
<h3>圖片列表</h3>
<ul>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/1.jpg" alt="" /></li>
</ul>
</div>
```
恩，就這么簡單，很美妙。效果可移步 `DEMO3` [margin處理圖片列表間隙解決方案](http://demo.doyoe.com/css/margin/img-list.htm)
我知道不少人還會使用給圖片列表容器加寬度的方式來進行處理，當然，它很OK，不過不夠靈活，因為在不同場景下，寬度可能不一樣，這樣的code無法被提取為公用樣式，復用性不強。
而 `margin` 的方式完全不care幾乎任何場景，都可以使用，因為在大多數情況，我們這樣一個圖片模塊都是自適應寬度的，因為它會處于某個layout下，寬度完全取決于layout，所以其實在真實場景下 `#demo` 的 `overflow` 并不是必須的，也就是說 `margin-right` 的負值理論上可以預設成一個很大的值。
### CSS
```css
#demo ul{
margin-right:-100px; /* 這個可以設置得比li的間隙更大，所以理論上可以寫一次而適用于真實場景的任何情況 */
}
```
看我們簡單還原的真實場景使用方式：`DEMO4` [模擬真實場景：margin處理圖片列表間隙解決方案](http://demo.doyoe.com/css/margin/img-list-2.htm)。恩，就這樣，靈活性和可擴展性爆棚，不是么？
## 縮進實例
依然先貼個圖，以下是 `圖三`：
貌似是個好常見的需求場景，當然，要實現這樣的效果，對于大家來說都不過是信手拈來，再容易不過。
### HTML
```html
<div>
<strong>簡介：</strong>
<p>該寫點什么好呢？好頭痛，一個能把value念成“哇柳”的中老年人，猛然覺得沒文化好可怕。</p>
</div>
```
你可能隨手就會寫下 `float + margin/padding`，`float + bfc`，`absolute + margin/padding`，`flex` 等方案中的隨意一個，恩，都很Cool，我也常這么干。
只是有的時候在一個小場景下，希望能比較輕量的出來這樣的縮進，可能不想有浮動，絕對定位，清除浮動之類的，怎么破？
## margin依然是你很好的選擇
你想到了嗎？是的，用margin。
### HTML
```html
<p><strong>簡介：</strong>該寫點什么好呢？好頭痛，一個能把value念成“哇柳”的中老年人，猛然覺得沒文化好可怕。</p>
```
### CSS
```css
p{
padding-left:45px;
}
strong{
margin-left:-45px;
}
```
看起來很簡單，沒有浮動，沒有絕對定位，沒有其它重布局，很清涼有木有？
甚至 `HTML` 也可以更簡單，因為無需對后面那長段做任何處理，所以不需要再加包裹。來看看具體例子吧。`DEMO5` [margin縮進實例](http://demo.doyoe.com/css/margin/indent.htm)。我想這樣的輕量方式，在一定時候還是有使用價值的，不是么？
## 視覺欺騙偽等高
等高布局在一段時間內好似挺火，方案也涌現過不少，如 `圖四`：
該圖要求，不論是主欄還是側欄，總是以最高的那列為基準高度。核心代碼：
### CSS
```css
#doc{
overflow:hidden;
}
#main,#aside{
margin-bottom:-999px;
padding-bottom:999px;
}
```
### HTML
```html
<div id="doc">
<div id="main">主內容欄<br />占位內容</div>
<div id="aside">側邊欄</div>
</div>
```
先看看結果：`DEMO6` [margin偽等高布局](http://demo.doyoe.com/css/margin/layout.htm)
效果和我們的要求一致，達到了等高布局。需要提醒的是，這其實只是視覺欺騙，做到的了偽高等高。主欄和側欄的實際高度其實并不相等，之所以可以達成這樣的效果，其原因在于負 `margin` 值。我們前文中有提到過，`margin` 會影響其上下文布局，當我們將 `margin-bottom` 設置為負值時，其相鄰的包含塊元素，底部會自動上去其負值的高度，直到最高的那列底部邊緣為止，然后裁剪。但該列本身的高度并不會發生變化，同時因為有 `padding-bottom` 向下擴展，顏色被填充滿padding區域，于是達到視覺上的等高。
描述的貌似有點復雜，沒文化好可怕。差不多就這樣，不能接著往下寫了，要不收不住。
作為 `CSS` 的重要屬性 `margin` 有很多可被挖掘的潛力，需要更多的是想法。enjoy it.
