CSS中如何調整盒子的填充距離

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

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

CSS技術為盒子的三個組成部分下了明確的定義：

1.填充：指盒子邊框與盒子內容之間的距離。

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

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

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

調整盒子的填充距離：

CSS技術利用padding系列屬性來調整盒子的填充距離。

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

padding屬性的使用格式：

padding:top right bottom left;

padding屬性的取值：

帶有單位的長度值。

auto

百分比

padding屬性還派生出下列四個子屬性，用于調整四個方向上單獨的填充距離：

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

padding-right，設置盒子右側填充的距離。

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

padding-left，設置盒子左側填充的距離。

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

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

盒子的實際寬度=盒子的期望寬度-盒子的左側填充距離-盒子的右側填充距離

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

padding:10px 0 0 20px;

因此，計算盒子的實際寬高：

盒子的實際高度=300px-10px-0px=290px

盒子的實際寬度=500px-20px-0px=480px

所以，該盒子的CSS代碼應設置為如下所示：

width:480px; height:290px;

padding:10px 0 0 20px;

當然，有開發經驗的人一定知道，CSS3技術提供了一個名為box-sizing的屬性，避免了這類填充相減的復雜操作。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS中如何調整盒子的填充距離”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!