CSS外邊距設(shè)置屬性margin用法
本文向大家描述一下CSS外邊距屬性margin的用法，設(shè)置外邊距的最簡(jiǎn)單的方法就是使用margin屬性，這個(gè)屬性接受任何長(zhǎng)度單位、百分?jǐn)?shù)值甚至負(fù)值，相信本文介紹一定會(huì)讓你有所收獲。
CSS外邊距
圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。設(shè)置外邊距的最簡(jiǎn)單的方法就是使用margin屬性，這個(gè)屬性接受任何長(zhǎng)度單位、百分?jǐn)?shù)值甚至負(fù)值。
CSS margin屬性
設(shè)置外邊距的最簡(jiǎn)單的方法就是使用margin屬性。
margin屬性接受任何長(zhǎng)度單位，可以是像素、英寸、毫米或em。
margin可以設(shè)置為auto。更常見(jiàn)的做法是為外邊距設(shè)置長(zhǎng)度值。下面的聲明在h1元素的各個(gè)邊上設(shè)置了1/4英寸寬的空白：
h1{margin:0.25in;}下面的例子為h1元素的四個(gè)邊分別定義了不同的外邊距，所使用的長(zhǎng)度單位是像素(px)：
h1{margin:10px0px15px5px;}與內(nèi)邊距的設(shè)置相同，這些值的順序是從上外邊距(top)開(kāi)始圍著元素順時(shí)針旋轉(zhuǎn)的：
margin:toprightbottomleft另外，還可以為margin設(shè)置一個(gè)百分比數(shù)值：
p{margin:10%;}百分?jǐn)?shù)是相對(duì)于父元素的width計(jì)算的。上面這個(gè)例子為p元素設(shè)置的外邊距是其父元素的width的10%。
margin的默認(rèn)值是0，所以如果沒(méi)有為margin聲明一個(gè)值，就不會(huì)出現(xiàn)外邊距。但是，在實(shí)際中，瀏覽器對(duì)許多元素已經(jīng)提供了預(yù)定的樣式，外邊距也不例外。例如，在支持CSS的瀏覽器中，外邊距會(huì)在每個(gè)段落元素的上面和下面生成“空行”。因此，如果沒(méi)有為p元素聲明外邊距，瀏覽器可能會(huì)自己應(yīng)用一個(gè)外邊距。當(dāng)然，只要你特別作了聲明，就會(huì)覆蓋默認(rèn)樣式。
值復(fù)制
還記得嗎？我們?cè)?jīng)在前兩節(jié)中提到過(guò)值復(fù)制。下面我們?yōu)槟v解如何使用值復(fù)制。
有時(shí)，我們會(huì)輸入一些重復(fù)的值：
p{margin:0.5em1em0.5em1em;}通過(guò)值復(fù)制，您可以不必重復(fù)地鍵入這對(duì)數(shù)字。上面的規(guī)則與下面的規(guī)則是等價(jià)的：
p{margin:0.5em1em;}這兩個(gè)值可以取代前面4個(gè)值。這是如何做到的呢？CSS定義了一些規(guī)則，允許為外邊距指定少于4個(gè)值。規(guī)則如下：
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
下圖提供了更直觀的方法來(lái)了解這一點(diǎn)：
換句話說(shuō)，如果為外邊距指定了3個(gè)值，則第4個(gè)值（即左外邊距）會(huì)從第2個(gè)值（右外邊距）復(fù)制得到。如果給定了兩個(gè)值，第4個(gè)值會(huì)從第2個(gè)值復(fù)制得到，第3個(gè)值（下外邊距）會(huì)從第1個(gè)值（上外邊距）復(fù)制得到。***一個(gè)情況，如果只給定一個(gè)值，那么其他3個(gè)外邊距都由這個(gè)值（上外邊距）復(fù)制得到。
利用這個(gè)簡(jiǎn)單的機(jī)制，您只需指定必要的值，而不必全部都應(yīng)用4個(gè)值，例如：
- h1{margin:0.25em1em0.5em;} /*等價(jià)于0.25em1em0.5em1em*/
- h2{margin:0.5em1em;} /*等價(jià)于0.5em1em0.5em1em*/
- p{margin:1px;} /*等價(jià)于1px1px1px1px*/
這種辦法有一個(gè)小缺點(diǎn)，您***肯定會(huì)遇到這個(gè)問(wèn)題。假設(shè)希望把p元素的上外邊距和左外邊距設(shè)置為20像素，下外邊距和右外邊距設(shè)置為30像素。在這種情況下，必須寫(xiě)作：
p{margin:20px30px30px20px;}這樣才能得到您想要的結(jié)果。遺憾的是，在這種情況下，所需值的個(gè)數(shù)沒(méi)有辦法更少了。
再來(lái)看另外一個(gè)例子。如果希望除了左外邊距以外所有其他外邊距都是auto（左外邊距是20px）：
p{margin:autoautoauto20px;}同樣的，這樣才能得到你想要的效果。問(wèn)題在于，鍵入這些auto有些麻煩。如果您只是希望控制元素單邊上的外邊距，請(qǐng)使用單邊外邊距屬性。#p#
單邊外邊距屬性
您可以使用單邊外邊距屬性為元素單邊上的外邊距設(shè)置值。假設(shè)您希望把p元素的左外邊距設(shè)置為20px。不必使用margin（需要鍵入很多auto），而是可以采用以下方法：
p{margin-left:20px;}您可以使用下列任何一個(gè)屬性來(lái)只設(shè)置相應(yīng)上的外邊距，而不會(huì)直接影響所有其他CSS外邊距：
- margin-top
- margin-right
- margin-bottom
- margin-left
一個(gè)規(guī)則中可以使用多個(gè)這種單邊屬性，例如：
- h2{
- margin-top:20px;
- margin-right:30px;
- margin-bottom:30px;
- margin-left:20px;
- }
當(dāng)然，對(duì)于這種情況，使用margin可能更容易一些：
p{margin:20px30px30px20px;}不論使用單邊屬性還是使用margin，得到的結(jié)果都一樣。一般來(lái)說(shuō)，如果希望為多個(gè)邊設(shè)置外邊距，使用margin會(huì)更容易一些。不過(guò)，從文檔顯示的角度看，實(shí)際上使用哪種方法都不重要，所以應(yīng)該選擇對(duì)自己來(lái)說(shuō)更容易的一種方法。
提示和注釋
提示：Netscape和IE對(duì)body標(biāo)簽定義的默認(rèn)邊距（margin）值是8px。而Opera不是這樣。相反地，Opera將內(nèi)部填充（padding）的默認(rèn)值定義為8px，因此如果希望對(duì)整個(gè)網(wǎng)站的邊緣部分進(jìn)行調(diào)整，并將之正確顯示于Opera中，那么必須對(duì)body的padding進(jìn)行自定義。
【編輯推薦】
- 全面認(rèn)識(shí)CSS中margin屬性用法
- CSS中margin屬性的基本特性和寫(xiě)法
- CSS中margin屬性解析邏輯
- 深入學(xué)習(xí)六大CSS選擇符的使用
- 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因
