CSS中Margin和Padding的用法與區別

在前面的文章中已經說過了CSS的定位、布局以及CSS尺寸等一些屬性的用法，今天就來說一說CSS的另外兩個重要的屬性Margin(外補白)和Padding(內補白)。這兩個屬性在CSS+DIV布局的網頁中百分之百會用到，所以沒掌握其用法的朋友，來我一起來學習一下吧。

1、Margin(外補白)的定義及其用法

Margin(外補白)是用來檢索或設定對象四邊的外延邊距(可以簡單的理解為div四邊到螢幕上下左右的距離或者div與div之間的距離)的，其對應的用法語句有margin、margin-top、margin-right、margin-bottom、margin-left等五個，它們的取值都有length(長度)和precentage(百分比)兩種。當使用margin時，如果只提供一個值，那麼將用於全部的四邊；如果提供兩個，第一個用於上、下，第

二個用於左、右；如果提供三個，第一個用於上，第二個用於左、右，第三個用於下；當然提供四個，就是分別作用上，右，下，左四個邊。內聯對象可以使用該屬性設定左、右兩邊的外補丁；若要設定上、下兩邊的外補丁，必須先使該對象表現為塊級或內聯塊級。

Margin(外補白)具體用法樣本如下：

代碼如下

複製代碼

.test1{width:500px;height:100px;margin:100px} .test2{width:500px;height:100px;margin-top:100px} .test3{width:500px;height:100px;margin-right:100px} .test4{width:500px;height:100px;margin-bottom:100px} .test5{width:500px;height:100px;margin-left:100px} <div class="test1">請注意我距螢幕四邊的距離</div> <div class="test2">請注意我距螢幕上邊的距離</div> <div class="test3">請注意我距螢幕右邊的距離</div> <div class="test4">請注意我距螢幕下邊的距離</div> <div class="test5">請注意我距螢幕左邊的距離</div>

2、Padding(內補白)的定義及其用法

Padding(內補白)是用來檢索或設定對象四邊的內部邊距。(可以簡單的理解為div內部元素到div四邊的距離)。 其對應的用法語句有padding、padding-top、padding-right、padding-bottom、padding-left等五個，它們的取值都有length(長度)和precentage(百分比)兩種。如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。如果只提供一個，將用於全部的四邊。如果提供兩個，第一個用於上、下，第二個用於左、右。如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。內聯對象可以使用該屬性設定左、右兩邊的內補丁；若要設定上、下兩邊的內補丁，必須先使該對象表現為塊級或內聯塊級。

Margin(外補白)具體用法樣本如下：

代碼如下

複製代碼

.test6{width:500px;height:100px;padding:10px} .test7{width:500px;height:100px;padding-top:100px} .test8{width:500px;height:100px;padding-right:100px} .test9{width:500px;height:100px;padding-bottom:100px} .test10{width:500px;height:100px;padding-left:100px} <div class="test6">請注意我距對象四邊的距離</div> <div class="test7">請注意我距對象上邊的距離</div> <div class="test8">請注意我距對象右邊的距離</div> <div class="test9">請注意我距對象下邊的距離</div> <div class="test10">請注意我距對象左邊的距離</div>