1. 程式人生 > >padding 內邊距

padding 內邊距

http://www.divcss5.com/rumen/r418.shtml

可以利用padding內邊距設定上、下、左、右物件內容與四個邊距距離間隔

1、padding-left 設定物件距離左邊的邊距補白間隔
div{padding-left:5px}
物件內距離左邊補白間距為5px

2、padding-right 設定物件距離右邊的邊距補白間隔
div{padding-right:5px}
物件內距離右邊補白間距為5px

3、padding-top 設定物件距離上邊的邊距補白間隔
div{padding-top:5px}
物件內距離上邊補白間距為5px

4、padding-bottom 設定物件距離下邊的邊距補白間隔


div{padding-bottom:5px}
物件內距離下邊補白間距為5px


檢索或設定物件四邊的補丁邊距。
如果提供全部四個引數值,將按上-右-下-左的順序作用於四邊。
如果只提供一個,將用於全部的四條邊。
如果提供兩個,第一個用於上-下,第二個用於左-右。
如果提供三個,第一個用於上,第二個用於左-右,第三個用於下。
內聯物件要使用該屬性,必須先設定物件的height或width屬性,或者設定position屬性為absolute

Padding的值不能為負值。

1、四邊相同padding簡寫
如果padding四邊設定值相同,假如為5px,原始表達方式:
padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;

可以CSS簡寫為:
padding:5px;

2、四邊不同padding簡寫
就像我們第二點教程中四邊不同padding值,padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

我們可以簡寫為:
Padding:40px 30px 50px 20px;
注意每個數值後一個空格間隔隔開

解釋分別意思
第一個40px代表“上”padding-top:40px;
第二個30px代表“右”padding-right:30px;
第三個50px代表“下”padding-bottom:50px;
第四個20px代表“左”padding-left:20px;


3、左右相同,上下不同值padding簡寫
假如padding左右為10px,上為20px,下為30px

一般寫法:
padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:30px

簡寫可以為:
Padding:20px 10px 30px;

前者第一個20px代表padding-top上為20px,
第二個10px,代表padding-left和padding-right左右為10px
第三30px,代表padding-bottom:30px

4、三邊相同,一邊值不同
任意三邊相同值,另外邊不同我們仍然可以簡寫。

EXP
假如padding上左右為10px,下為20px,這個時候一般這樣寫CSS樣式
padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px

簡寫為:
padding:10px;padding-bottom:20px
注意順序不能顛倒,這裡運用技巧是瀏覽器讀取是從上到下,從左到右讀取方式,所以我們可以先設定四邊相同,後面加一個另外一邊不同樣式值即可。