CSS margin 屬性與用法範例

CSS margin 屬性用來定義一個區域(例如 DIVspan)的外邊界距離,俗稱外距,與常用的 padding(內距)剛好不同。margin 可以讓你一次設定四個邊的外距,也可以分別設定每個邊不同的外距,特別的是 margin 可以設定負値。

語法範例

margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;


第一個範例我們分別設定四個邊不同的値,依序為上右下左,每個値必須由空白隔開,第二個範例我們設定了兩個値,上下邊的外距都會一樣,而左右邊的外距會一樣,第三個範例我們給了三個値,分別是上外距、左右外距與下外距,這樣設定左右邊的外距會一樣,第四個範例我們只給了一個値,這樣代表四個邊的外距都一樣,算是比較簡短的寫法。

CSS margin 實際範例
<div style="width:130px;height:130px;background-color:#D4E6F8;">
 <div style="background-color:#FFC991;width:80px;height:80px;margin:5px 10px 15px 20px"></div>
</div>
這樣的寫法代表上外距為 5px,右外距為 10px,下外距為 15px 而左外距則為 20px,呈現結果如下方所示

 

在此範例中的橘色區域就是我們要設定的區域,透過 margin 分別設定了四個邊的外距,所以每個邊距離都不一樣,範例中的 background-color 是背景顏色,width 與 height 則是設定 DIV 區塊的寬度與高度。

CSS margin 的四個邊獨立寫法
  • margin-top:與上方元素的距離
  • margin-right:與右方元素的距離
  • margin-bottom:與下方元素的距離
  • margin-left:與左方元素的距離
以上各個單邊可以單獨使用,也可以混搭使用。

margin 可以的值有 auto、長度單位與 %,各種値應用範圍不一定相同
  • margin:auto; //代表讓瀏覽器自己去設定。
  • margin:長度單位; //就是給數字跟單位,單位可以是 em、px、pt 等値。
  • margin:%; //讓瀏覽器自己去設定,跟邊界元素有關。
延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C