margin系列之keyword auto

doyoe發表於2013-12-04

原文地址：margin系列之keyword auto by @doyoe

margin的重要性：

有個不容置疑的事，前端開發人員沒有人能夠忽視CSS margin的重要性。CSS coding時，margin的使用頻率就如同呼吸般頻繁，如果我可以說得誇張點的話。

margin作為CSS盒模型基本組成要素之一，是非常Basis的一個技術手段，所以我想對於它的一些基本情況應該不用太介紹了？

margin經常被用來做什麼？

  • 讓塊元素水平居中；
  • 讓元素之間留有舒適的留白；
  • 處理特殊的first或last，大家懂的？
  • 一些佈局；

需要注意的地方：

  • margin摺疊；
  • margin的百分比值；
  • margin的auto值；
  • margin和相對偏移top, right, bottom, left的異同；
  • IE6浮動雙margin Bug；
  • IE6浮動相鄰元素3px Bug；

看起來似乎有不少的知識點？恩，這些都是我們需要了解的，包括一些沒有被列舉出來的點。

今天要講的其實只是其中很少的一部分，恩，標題裡有：keyword auto

keyword auto

auto是margin的可選值之一。相信大家平時使用auto值時，最多的用法大概是 margin: 0 auto; 和 margin: auto;，恩，是的，塊元素水平居中。讓我們來看看程式碼實現：

CSS:

#demo{
    width: 500px;
    margin: auto; /* 或者 margin: 0 auto; */
}

HTML:

<div id="demo">
    <p>恩，我就是那個需要水平居中的傢伙。</p>
</div>

為了更明顯點，我們來看個例子：margin實現塊元素水平居中。Cool，這麼簡單就實現了水平居中。

不過你可能也發現了不論是 margin: auto; 還是 margin: 0 auto; 效果都是一樣的，都是讓 #demo 水平居中了，但縱向並沒有任何變化。

大家都知道 margin 是複合屬性，也就是說 margin: auto; 其實相當於 margin: auto auto auto auto;，margin: 0 auto;相當於 margin: 0 auto 0 auto;，四個值分別對應上右下左。至於CSS中的上、右、下、左順序就不做贅述了。

根據規範，margin-top: auto; 和 margin-bottom: auto;，其計算值為0。這也就解釋了為什麼 margin: auto; 等同於 margin: 0 auto;。但僅此而已嗎？讓我們來看看規範描述：

原文：On the A edge and C edge, the used value of ‘auto’ is 0.

翻譯：如果場景是A和C，那麼其 auto 計算值為 0。

更詳細請參閱：margin properties

由此可見，它們還與書寫模式 writing-mode 和 文件流方向 direction 有關。所以我們說 margin: auto; 等同於 margin: 0 auto; 是不太精準的，因為還有前置條件。

瞭解這些很重要，這有助於理解 margin 屬性的設計意圖。

OK，聊了這麼多，我們回到預設的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況繼續往下，後面的話題都基於這個前提。

為什麼auto能實現水平居中？

這是因為水平方向的 auto，其計算值取決於可用空間（剩餘空間）。

原文：On the B edge and D edge, the used value depends on the available space.

翻譯：如果場景是B和D，那麼其 auto 計算值取決於可用空間。

想象這樣一個場景，一個寬100px的p被包含在一個寬500px的div內，此時設定 p 的 margin-left 值為 auto，大家覺得結果會怎樣？

CSS:

#demo{
    width: 500px;
}
#demo p{
    width: 100px;
    margin-left: auto;
}

HTML:

<div id="demo">
    <p>恩，我就是那個p。</p>
</div>

結果你猜到了嗎？沒猜到也不怕，用事實說話：margin-left關鍵字auto結果猜想。

好了，結果得到了，p相對於包含塊右對齊了，這與規範描述一致。margin-left:auto; 自動佔據了包含塊的可用空間，即 500 - 100px = 400px。也就是說auto最後的計算值為400px，即 margin-left:400px;。所以 margin-right:auto; 的結果會相當於左對齊。

到這裡，相信大家都知道為什麼 margin: auto; 和 margin: 0 auto; 能實現水平居中了。因為左右方向的auto值均分了可用空間，使得塊元素得以在包含塊內居中顯示。

至於垂直方向上為什麼無法居中，還有更深層的原因嗎？大家可以思考一下。

可參考：

margin系列文章：

相關文章