之前一直沒有注意到：margin取百分比的時候到底是根據什麼值來取的百分比。其實這應該算是非常基礎的一個問題了，現在想想自己覺得已經會用一些框架了，也能切除好看的頁面了，就沾沾自得的心態是非常不可取的。

那麼，今天寫的這篇博文就從一個問題開始吧。

假設一個塊級的父元素的margin值為800x 600px，那麼當塊級的子元素設定margin為10% 15%的時候，margin-top、margin-right、margin-bottom、margin-left的值分別是多少呢？

下面讓我們在實際的HTML程式碼中嘗試一下：

CSS：

#demo {
  width: 800px;
  height
 
: 600px;
  background: #2E8B57;
}
#box {
  margin: 10% 5%;
  background: #9370DB;
}

HTML：

<div id="demo">
    <div id="box">test</div>
</div>

實際執行出來告訴我們結果是：80px 40px 80px 40px。

那麼為什麼是這個結果呢？

規範中註明margin的百分比值參照其包含塊的寬度進行計算。

但這是發生在預設的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況下。

當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。我們改變一下上面例子中的CSS書寫模式：

CSS:

#demo{
    writing-mode: vertical-rl;
}

就會發現，結果變成了60px 30px 60px 30px，也就是參照父元素的高度來實現的。