萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程:3.3 內邊距(padding)

CSS教程:3.3 內邊距(padding)

class="area">

padding．又稱為內邊距．用於控制內容與邊框之間的距離。和前面介紹的邊框類似，padding屬性可以設置1、2、3或4個屬性值，分別如下：

● 設置1個屬性值時，表示上下左右4個padding均為該值；WANGYEXX.COM

● 設置2個屬性值時，前者為上下padding的值，後者為左右padding的值；

● 設置3個屬性值時．第1個為上padding的值，第2個為左右padding的值，第3個為下padding的值；

● 設置4個屬性值時，按照順時針方向，依次為上、右、下、左padding的值。

如果需要專門設置某一個方向的padding，可以使用padding-left，padding-right．padding-top或者padding-hortom來設置。例如有如下代碼。

<style type="text/css"> 
#outerBox{  
    width:128px;  
    height:128px;  
    padding:20px 20px 10px; /*上  左右  下*/  
    padding-left:10px;  
    border:10px gray dashed;  
}  
</style> 
<body> 
    <div id="outerBox"> 
        <img src="wangyexx.com.gif"> 
    </div> 
</body>

其結果是上側和右側的padding為20像素，下側和左側的padding為10像素，如圖1所示。

圖1 設置padding後的效果

經驗：當一個盒子設置了背景圖像後，默認情況下背景圖像覆蓋的范圍是padding和內容組成的范圍，並以padding的左上角為基准點平鋪背景圖像。

萬盛學電腦網

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程:3.3 內邊距(padding)

CSS教程:3.3 內邊距(padding)

DivCSS教程排行

程序編程推薦

熱門文章

相關文章

圖片文章

在Linux的命令行中使用BitTorrent進行下載的教程

詳解CSS3中使用gradient實現漸變效果的方法

體驗友好的頂尖游戲社區網頁設計

ubuntu u盤安裝圖解

萬盛學電腦網 | 設為首頁 | 加入收藏