詳解CSS的margin屬性使用
- 高洛峰原創
- 2017-03-27 09:40:571739瀏覽
設定外邊距的最簡單的方法就是使用 margin 屬性。
margin 屬性接受任何長度單位，可以是像素、英吋、毫米或 em。
margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。下面的聲明在h1 元素的各個邊上設置了1/4 英寸寬的空白：
h1 {margin : 0.25in;}
下面的範例為h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素(px)：
h1 {margin : 10px 0px 15px 5px;}
#與內邊距的設定相同，這些設定相同，這些值的順序是從上方外側距(top) 開始圍著元素順時針旋轉的：
margin: top right bottom left
另外，也可以為margin 設定一個百分比數值：
p {margin : 10%;}
百分數是相對於父元素的width 計算的。上面這個範例為 p 元素所設定的外邊距是其父元素的 width 的 10%。
margin 的預設值是 0，所以如果沒有為 margin 宣告一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支援 CSS 的瀏覽器中，外邊距會在每個段落元素的上方和下方產生「空白行」。因此，如果沒有為 p 元素宣告外邊距，瀏覽器可能會自行套用一個外邊距。當然，只要你特別作了聲明，就會覆蓋預設樣式。
值複製
還記得嗎？我們曾經在前兩節中提到過值複製。下面我們為您講解如何使用值複製。
有時，我們會輸入一些重複的值：
p {margin: 0.5em 1em 0.5em 1em;}
透過數值複製，您不必重複鍵入這對數字。上面的規則與下面的規則是等價的：
p {margin: 0.5em 1em;}
這兩個值可以取代前面 4 個值。這是如何做到的呢？ CSS 定義了一些規則，允許為外邊距指定少於 4 個值。規則如下：
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
下圖提供了更直觀的方法來了解這一點：
換句話說，如果為外邊距指定了3 個值，則第4 個值（即左外邊距）會從第2 個值（右外邊距）複製得到。如果給定了兩個值，第 4 個值會從第 2 個值複製得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）複製得到。最後一個情況，如果只給定一個值，那麼其他 3 個外邊距都由這個值（上外邊距）複製得到。
利用這個簡單的機制，您只需指定必要的值，而不必全部都應用4 個值，例如：
h1 {margin: 0.25em 1em 0.5em;} /*等價於 0.25em 1em 0.5em 1em */h2 {margin: 0.5em 1em;} /* 等價於 0.5em 1em 0.5em 1em */p 0.5em 1em 0.5em 1em */p 0.5em 1em 0.5em 1em */p 0.5em 1em 0.5em 1em */p {margin:1p * /
這種辦法有一個小缺點，您最後一定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設定為 20 像素，下外邊距和右外邊距都設定為 30 像素。在這種情況下，必須寫作：
p {margin: 20px 30px 30px 20px;}
這樣才能得到您想要的結果。遺憾的是，在這種情況下，所需值的數量沒有辦法更少了。
再來看另外一個例子。如果希望除了左外邊距以外所有其他外邊距都是auto（左外邊距是20px）：
p {margin: auto auto auto 20px;}
#相同的，這樣才能得到你想要的效果。問題在於，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。
單邊外邊距屬性
您可以使用單邊外邊距屬性為元素單邊上的外邊距設定值。假設您希望把 p 元素的左外邊距設定為 20px。不必使用margin（需要鍵入很多auto），而是可以採用以下方法：
p {margin-left: 20px;}
您可以使用下列任何一個屬性來只設定相應上的外邊距，而不會直接影響所有其他外邊距：
margin-top
#margin-right
margin-bottom
margin-left
一個規則中可以使用多個這個單邊屬性，例如：
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
當然，對於這個情況，使用margin 可能更容易一些：
p {margin: 20px 30px 30px 20px;}
不論使用單邊屬性還是使用 margin，得到的結果都一樣。一般來說，如果希望為多個邊設定外邊距，使用 margin 會比較容易一些。不過，從文件顯示的角度來看，實際上使用哪種方法都不重要，所以應該選擇對自己來說更容易的一種方法。
提示與註解
提示：Netscape 和 IE 對 body 標籤定義的預設邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的預設值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，並將之正確顯示於 Opera 中，那麼必須對 body 的 padding 進行自訂。
CSS 外邊距實例：
<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>
設定文字的右外邊距：
<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body>
</html>
設定文字的上外邊距：
<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>
設定文字的下外邊距：
<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>
所有的外邊距屬性在一個宣告中：
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>以上是詳解CSS的margin屬性使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！