CSS屬性之Margin和Padding的用法發布者:本站 時間:2020-05-16 09:05:59
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>
選擇我們,優質服務,不容錯過
1. 優秀的網絡資源,強大的網站優化技術,穩定的網站和速度保證
2. 15年上海網站建設經驗,優秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網絡,更省心。
------------------------------------------------------------
24小時聯系電話:021-58370032