CSS之margin屬性由淺入深詳解

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎屬性。
一、margin的基本特性
　　margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來設定box的margin area。屬性margin可以用來同時設定box的四邊外邊距，而其他的margin屬性只能設定其自各的外邊距。
　　margin屬性可以應用於幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對非置換內嵌元素（non-replaced inline element）不起作用。
　　或許有朋友對非置換元素（non-replaced element）有點疑惑，稍微協助大家理解一下。非置換元素，W3C中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對應著置換元素（replaced element），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
　　從定義中我們可以理解到，置換元素（replaced element）主要是指img，input，textarea，select，object等這類預設就有CSS格式化外表範圍的元素。進而可知，非置換元素（non-replaced element）就是除了img，input，textarea，select，object等置換元素以外的元素。
　　margin始終是透明的。
二、margin的基本寫法
　　外邊距的margin-width的實值型別有：auto | length | percentage
　　percentage：百分比是由被應用box的containing block（註：一個元素的containing block是該元素產生的box(es)在計算位置和大小時參考的一個矩形，詳細閱讀可看：《Containing Block》）的大小所決定。對於margin-top和margin-bottom也同樣成立。
　　margin的預設值為0，並且margin支援負值。
　　上面我們曾提到屬性margin可以用來同時指定box的四邊外邊距。如果屬性margin有四個值，那麼值將按照上-右-下-左的順序作用於四邊，即從元素的上邊開始，按照順時針的順序圍繞元素。運算式如下：
margin：top right bottom left；

我們舉例說明一下：

範例程式碼 [www.dedecms.com]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
div {width:200px; height:200px; background:#ccc;}
</style>
</head>
<body>
<div>外邊距的margin-width的實值型別有：auto | length | percentage</div>
</body>
</html>
　　如上代碼，很簡單，為了方便我們看到效果，我們給div設定了寬度和高度以及背景色。
　　現在我們給div的樣式加上margin屬性，比如：

範例程式碼 [www.dedecms.com]margin:-10px 20px -30px 40px;
　　這時候margin的解析邏輯是怎樣的呢？首先我們要搞清div的和周邊元素的關係，div沒有相連元素，而此時div的containing block是body產生的block box。則根據上面介紹的輔助線原理，div的左外邊距以containing block的content左邊為輔助線，及此時以body的content左邊為輔助線進行水平向右位移，位移的大小為40px，同理，上邊距以body的content上邊為輔助線進行垂直向上位移10px（負值和正值的方向相反），下邊距依照現在div的borer下邊（此時的div已經經過上邊距位移過了）垂直向上位移30px（此時，margin不會改變box的border內的物理大小，但會改變box的邏輯大小，即：以此box的margin的下邊為參考的元素，不是從box的物理位置開始的，而是從邏輯位置開始），右邊距依照現在div的borer右邊（此時的div已經經過左邊距位移過了）水平向右位移20px。或許有朋友問你分析的順序怎麼和margin運算式中出現的順序不一樣？假如按照margin運算式中出現的順序來分析，結果是一樣的，只是為了更好的方便大家的理解而沒有按照運算式的順序來分析。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More