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

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

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

Margin(外補(bǔ)白)具體用法示例如下：

.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">請(qǐng)注意我距屏幕四邊的距離</div>

<div class="test2">請(qǐng)注意我距屏幕上邊的距離</div>

<div class="test3">請(qǐng)注意我距屏幕右邊的距離</div>

<div class="test4">請(qǐng)注意我距屏幕下邊的距離</div>

<div class="test5">請(qǐng)注意我距屏幕左邊的距離</div>

2、Padding(內(nèi)補(bǔ)白)的定義及其用法

Padding(內(nèi)補(bǔ)白)是用來檢索或設(shè)置對(duì)象四邊的內(nèi)部邊距。(可以簡單的理解為div內(nèi)部元素到div四邊的距離)。 其對(duì)應(yīng)的用法語句有padding、padding-top、padding-right、padding-bottom、padding-left等五個(gè)，它們的取值都有l(wèi)ength(長度)和precentage(百分比)兩種。如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。如果只提供一個(gè)，將用于全部的四邊。如果提供兩個(gè)，第一個(gè)用于上、下，第二個(gè)用于左、右。如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。內(nèi)聯(lián)對(duì)象可以使用該屬性設(shè)置左、右兩邊的內(nèi)補(bǔ)丁；若要設(shè)置上、下兩邊的內(nèi)補(bǔ)丁，必須先使該對(duì)象表現(xiàn)為塊級(jí)或內(nèi)聯(lián)塊級(jí)。

Margin(外補(bǔ)白)具體用法示例如下：

.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">請(qǐng)注意我距對(duì)象四邊的距離</div>

<div class="test7">請(qǐng)注意我距對(duì)象上邊的距離</div>

<div class="test8">請(qǐng)注意我距對(duì)象右邊的距離</div>

<div class="test9">請(qǐng)注意我距對(duì)象下邊的距離</div>

<div class="test10">請(qǐng)注意我距對(duì)象左邊的距離</div>