web前端j技術雜談--css篇(1)--淺談margin

Margin是什麼?

   CSS 邊距屬性定義元素周圍的空間。經過使用單獨的屬性，能夠對上、右、下、左的外邊距進行設置。也能夠使用簡寫的外邊距屬性同時改變全部的外邊距。——W3School

   我比較喜歡使用「外邊距」這個詞來解釋margin（同理padding能夠稱之爲「內邊距」，可是我又偏偏喜歡稱呼padding爲「補白」或者「留白」），咱們能夠很清楚的瞭解到margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

Margin的特性 :

  margin始終是透明的。

  margin經過使用單獨的屬性，能夠對上、右、下、左的外邊距進行設置。

  外邊距的 margin-width 的值類型有：auto | length | percentage

margin在塊元素、內聯元素中的區別:

margin在塊級元素下，他的性能能夠徹底體現，上下左右任你設定。且記住塊級元素的margin的參照基準是前一個元素即相對於自身以前的元素有margin距離。若是元素是第一個元素，則就是相對於父元素的margin距離（但第一個元素相對於父元素margin-top而父元素又沒有設定padding-top/border-top的話要須要印證上面的垂直外邊距合併的知識）

margin也能用於內聯元素，這是規範所容許的，可是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，而且因爲邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。

這是由於邊界應用於內聯元素時不改變元素的行高度，若是你要改變內聯元素的行高即相似文本的行間距，那麼你只能使用這三個屬性：line-height，fong-size，vertical-align。請記住，這個影響內聯元素高度的是line-height而不是height，由於內聯元素是一行行的，定一個height的話，那這究竟是整段inline元素的高呢？仍是inline元素一行的高呢？這都說不許，因此統一都給每行定一個高，只能是line-height了。

margin-top/margin-bottom對內聯元素沒有多大實際效果，不過margin-left/margin-right仍是可以對內聯元素產生影響的。應用margin:10px 20px 30px 40px;，左邊這個css若是寫在inline元素上，他的效果大體是，上下無效果，左邊離他相鄰元素或者文本距離爲40px，右邊離他相鄰元素或者文本距離爲20px。你能夠自行嘗試一番。

最後在內聯元素中還有上文咱們提到的非可置換inline元素（non-replaced element），這些個元素img|input|select|textarea|button|label雖然是內聯元素，但margin依舊能夠影響到他的上下左右！

總結下來margin 屬性能夠應用於幾乎全部的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，並且垂直外邊距對非置換內聯元素（non-replaced inline element）不起做用。