這篇文章主要介紹了CSS中如何調(diào)整盒子的填充距離，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元新疆做網(wǎng)站,已為上家服務(wù),為新疆各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

CSS技術(shù)將HTML中所有的元素都認(rèn)為是一個(gè)“盒子”，并把這個(gè)“盒子”分為了三個(gè)組成部分，這三個(gè)組成部分分別叫做“填充”、“邊界”、“邊框”。顧名思義，盒子的主要功能就是盛放東西，CSS的意思是將各個(gè)HTML標(biāo)記對(duì)看做了容器，而標(biāo)記對(duì)內(nèi)部存放的文本、圖片、列表、表格、表單等都被看做了容器所盛放的內(nèi)容。

CSS技術(shù)為盒子的三個(gè)組成部分下了明確的定義：

1.填充：指盒子邊框與盒子內(nèi)容之間的距離。

2.邊界：指盒子與盒子之間的距離。

3.邊框：指填充與邊界之間的部分。

盒子的三個(gè)組成部分中，“填充”和“邊界”只提供了相關(guān)的距離屬性，而“邊框”提供了相關(guān)的距離屬性、顏色屬性和樣式屬性。

調(diào)整盒子的填充距離：

CSS技術(shù)利用padding系列屬性來調(diào)整盒子的填充距離。

padding屬性的取值為四個(gè)數(shù)值，按照“上、右、底、左”的順序排列書寫，之間用空格隔開。

padding屬性的使用格式：

padding:top right bottom left;

padding屬性的取值：

帶有單位的長度值。

auto

百分比

padding屬性還派生出下列四個(gè)子屬性，用于調(diào)整四個(gè)方向上單獨(dú)的填充距離：

padding-top，設(shè)置盒子頂部填充的距離。

padding-right，設(shè)置盒子右側(cè)填充的距離。

padding-bottom，設(shè)置盒子底部填充的距離。

padding-left，設(shè)置盒子左側(cè)填充的距離。

注意：盒子的填充具備了數(shù)值后，為了保證盒子的大小不發(fā)生變化，必須修改盒子的寬度和高度。

盒子的實(shí)際高度=盒子的期望高度-盒子的頂部填充距離-盒子的底部填充距離

盒子的實(shí)際寬度=盒子的期望寬度-盒子的左側(cè)填充距離-盒子的右側(cè)填充距離

例如：希望創(chuàng)建一個(gè)寬度為500，高度為300的盒子。同時(shí)頂部填充距離為10像素，左側(cè)填充距離為20像素，右側(cè)和底部填充均不設(shè)置，則padding屬性取值如下：

padding:10px 0 0 20px;

因此，計(jì)算盒子的實(shí)際寬高：

盒子的實(shí)際高度=300px-10px-0px=290px

盒子的實(shí)際寬度=500px-20px-0px=480px

所以，該盒子的CSS代碼應(yīng)設(shè)置為如下所示：

width:480px; height:290px;

padding:10px 0 0 20px;

當(dāng)然，有開發(fā)經(jīng)驗(yàn)的人一定知道，CSS3技術(shù)提供了一個(gè)名為box-sizing的屬性，避免了這類填充相減的復(fù)雜操作。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中如何調(diào)整盒子的填充距離”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!