CSS屬性之Margin和Padding的用法發(fā)布者：本站     時間：2020-05-16 09:05:59

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

Margin(外補白)是用來檢索或設置對象四邊的外延邊距(可以簡單的理解為div四邊到屏幕上下左右的距離或者div與div之間的距離)的，其對應的用法語句有margin、margin-top、margin-right、margin-bottom、margin-left等五個，它們的取值都有l(wèi)ength(長度)和precentage(百分比)兩種。當使用margin時，如果只提供一個值，那么將用于全部的四邊；如果提供兩個，第一個用于上、下，第二個用于左、右；如果提供三個，第一個用于上，第二個用于左、右，第三個用于下；當然提供四個，就是分別作用上，右，下，左四個邊。內聯(lián)對象可以使用該屬性設置左、右兩邊的外補丁；若要設置上、下兩邊的外補丁，必須先使該對象表現(xiàn)為塊級或內聯(lián)塊級。

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等五個，它們的取值都有l(wèi)ength(長度)和precentage(百分比)兩種。如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。如果只提供一個，將用于全部的四邊。如果提供兩個，第一個用于上、下，第二個用于左、右。如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。內聯(lián)對象可以使用該屬性設置左、右兩邊的內補?。蝗粢O置上、下兩邊的內補丁，必須先使該對象表現(xiàn)為塊級或內聯(lián)塊級。

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>