# margin系列之百分比
>原作者：doyoe
原文鏈接：http://blog.doyoe.com/2013/11/30/css/margin%E7%B3%BB%E5%88%97%E4%B9%8B%E7%99%BE%E5%88%86%E6%AF%94/
## 你可能從沒注意過它
在 [margin系列之keyword auto](http://www.hmoore.net/jaya1992/fe-notes/71910) 中，說過了 `margin` 值為 `auto` 的情況，這次要聊的是值為百分比的情形。
我必須承認這是一個非常基礎的知識點，但有一段時間我發現很多人對此有錯誤的認知。偶爾在面試或者分享的時候，我會問到這個問題，有人會脫口而出的告訴我他對此的感性理解。
或許現在大多數人對此不屑一顧，但我仍想說一說，這樣以后就可以不再問類似的問題了。
## 假設有這樣一個場景
仍然以一個問題來開始，這是我之前在 [微博](http://weibo.com/doyoe) 發過的，原文是這樣的：
假設一個塊級包含容器，寬1000px，高600px，塊級子元素定義 `margin:10% 5%;` 大家說說 `margin` 的 `top, right, bottom, left` 計算值最終是多少？
我記得得到不少 `100px 30px 100px 30px` 的反饋，我們來還原代碼：
### CSS:
```css
#demo{
width: 1000px;
height: 600px;
}
#demo p{
margin: 10% 5%;
}
```
### HTML:
```html
<div id="demo">
<p>恩，注意看我所在的位置。</p>
</div>
```
事實告訴我們結果是 `100px 50px 100px 50px`，不論結果是否符合你的預期，我們先來看demo驗證一下：[margin百分比結果猜想](http://demo.doyoe.com/css/margin/percentage.htm)，當然，你也根據上面還原的代碼自己創建一個例子。
## 為什么會這樣？
詫異嗎？不用懷疑瀏覽器出了問題，因為這是正確的實現。
規范中注明 `margin` 的百分比值參照其包含塊的寬度進行計算。
當然，它不會這么簡單，和上篇文章 keyword auto 一樣，這只發生在默認的 `writing-mode: horizontal-tb;` 和 `direction: ltr;` 的情況下。
當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。我們改變一下上面例子中的CSS書寫模式：
### CSS:
```css
#demo{
-webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
writing-mode: tb-rl; /* for ie */
}
```
在 #demo 中添加這2句，其它code不變。也有個例子供觀：[書寫模式影響margin百分比的參照對象](http://demo.doyoe.com/css/margin/percentage2.htm)。
恩，這回的結果是 `60px 30px 60px 30px` ，因為其參照對象變成了包含塊的高度。
## 順帶再說說
你是否覺得這不符合常規的感性認知？感性認知更多感覺應該橫向參照包含塊寬度，縱向參照包含塊高度。
其實這是為了要橫向和縱向2個方向都創建相同的margin，如果它們的參照物不一致，那就無法得到兩個方向相同的留白。
你可能會問那為什么要選擇寬度做參照而不是高度呢？
這其實更多的要從CSS設計意圖上去想，因為CSS的基礎需求是排版，而通常我們所見的橫排文字，其水平寬度一定（仔細回想一下，如果沒有顯式的定義寬度或者強制一行顯示，都會遇到邊界換行，而不是水平延展），垂直方向可以無限延展。但當書寫模式為縱向時，其參照就變成了高度而不再是寬度了。
還記得我們在 [margin系列之keyword auto](http://www.hmoore.net/jaya1992/fe-notes/71910) 留了個問題：為什么 `margin: auto;` 無法再縱向上垂直居中？其實原因也是上面所說的，因為縱向是可以無限延展的，所以沒有一個一定的值可以被參照被用來計算。
## 受書寫模式影響的其它特性：
- margin折疊
- margin的keyword auto value
- padding的百分比值
##可參考：
- [http://dev.w3.org/csswg/css-box/#the-margin-properties](http://dev.w3.org/csswg/css-box/#the-margin-properties)
- [http://dev.w3.org/csswg/css-box/#ltpercentagegt](http://dev.w3.org/csswg/css-box/#ltpercentagegt)
- [http://dev.w3.org/csswg/css-box/#Calculating](http://dev.w3.org/csswg/css-box/#Calculating
