CSS學(xué)習(xí)筆記Padding 屬性中參數(shù)的定義與使用
更新時(shí)間：2008年05月21日 23:22:16 作者：
css padding縮寫(xiě)技巧
一直都對(duì)CSS中Padding 屬性中參數(shù)個(gè)數(shù)的定義頗為困惑，例如：
body { padding: 32px;}
body { padding: 32px 24px; }
body { padding: 32px 24px 18px; }
body { padding: 32px 24px 18px 12px; }
今天baidu查看了CSS的標(biāo)準(zhǔn)文檔，其中是這樣規(guī)定的：
如果只提供一個(gè)，將用于全部的四條邊；
如果提供兩個(gè)，第一個(gè)用于上－下，第二個(gè)用于左－右；
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下；
如果提供全部四個(gè)參數(shù)值，將按上－右－下－左的順序作用于四邊。
body { padding: 36px;} //對(duì)象四邊的補(bǔ)丁邊距均為36px
body { padding: 36px 24px; }
//上下兩邊的補(bǔ)丁邊距為36px，左右兩邊的補(bǔ)丁邊距為24px
body { padding: 36px 24px 18px; }
//上、下兩邊的補(bǔ)丁邊距分別為36px、18px，左右兩邊的補(bǔ)丁邊距為24px
body { padding: 36px 24px 18px 12px; }
//上、右、下、左補(bǔ)丁邊距分別為36px、24px、18px、12px
做個(gè)記號(hào)，表忘記了。
body { padding: 32px;}
body { padding: 32px 24px; }
body { padding: 32px 24px 18px; }
body { padding: 32px 24px 18px 12px; }
今天baidu查看了CSS的標(biāo)準(zhǔn)文檔，其中是這樣規(guī)定的：
如果只提供一個(gè)，將用于全部的四條邊；
如果提供兩個(gè)，第一個(gè)用于上－下，第二個(gè)用于左－右；
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下；
如果提供全部四個(gè)參數(shù)值，將按上－右－下－左的順序作用于四邊。
body { padding: 36px;} //對(duì)象四邊的補(bǔ)丁邊距均為36px
body { padding: 36px 24px; }
//上下兩邊的補(bǔ)丁邊距為36px，左右兩邊的補(bǔ)丁邊距為24px
body { padding: 36px 24px 18px; }
//上、下兩邊的補(bǔ)丁邊距分別為36px、18px，左右兩邊的補(bǔ)丁邊距為24px
body { padding: 36px 24px 18px 12px; }
//上、右、下、左補(bǔ)丁邊距分別為36px、24px、18px、12px
做個(gè)記號(hào)，表忘記了。
相關(guān)文章
css position: absolute、relative詳解
今天在看CSS的時(shí)候遇到了position: absolute、relative的問(wèn)題，一直比較迷糊，今天終于搞清楚了。2008-11-11
IE浮動(dòng)邊界BUG延伸探討...2007-02-02
在解決ul居中問(wèn)題時(shí)想到的幾點(diǎn)
在解決ul居中問(wèn)題時(shí)想到的幾點(diǎn)...2007-09-09
padding、border會(huì)把div撐大的解決方法
所有HTML元素都可以看作盒子,CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周?chē)腍TML元素,它包括：邊距,邊框,填充,和實(shí)際內(nèi)容,盒模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素,因?yàn)镈iv添加了padding、border,Div的實(shí)際寬度=Div的初始固定值+邊距值+邊框值2023-09-09
非常不錯(cuò)的對(duì)于ie hack的一些寫(xiě)法講解2008-11-11
代碼實(shí)例之純CSS代碼實(shí)現(xiàn)翻頁(yè)效果
代碼實(shí)例之純CSS代碼實(shí)現(xiàn)翻頁(yè)效果...2007-03-03
在大多數(shù)文章中，我們并未特別注意CSS文件的可維護(hù)與可讀性的問(wèn)題，當(dāng)完成一項(xiàng)前端的工作之后，許多人都會(huì)忘記該項(xiàng)目的結(jié)構(gòu)與細(xì)節(jié)。然而代碼并不是馬上就能完全定型，在余下的時(shí)間里還有不斷的維護(hù)工作，而這些工作也許不會(huì)是你自己完成。2008-09-09
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解...2007-08-08
在IE下拖動(dòng)滾動(dòng)條時(shí)border消失的解決方法
在IE下拖動(dòng)滾動(dòng)條時(shí)border消失的解決方法...2007-01-01
firefox background-image垂直平鋪問(wèn)題的解決方法
firefox下background-image的垂直平鋪repeat-y不設(shè)置height的解決辦法2008-07-07