在網頁設計過程中元素的內邊距往往是缺少不了的，今天就來簡單介紹一下內邊距（padding）。
padding為元素的內邊距，常常用在盒模型（div）上。
乙個盒模型分為上右下左4個方向，同樣的內邊距（padding）也分為上右下左4個方向，分別為：
padding-top、padding-right、padding-bottom、padding-left
下面通過示例進行解釋：
1、首先來看在沒有設定padding屬性時的基本樣式：
從上圖中我們可以看到外層的container包含了內層的box。我們可以看到內層box是緊緊貼著外層container的。
接下來我們完成乙個小問題：
問題：內層box的上邊框要離外層container的上邊框10px的距離。
解析：我們需要使用padding-top屬性來進行設定。**和效果如下圖所示：
從最後的執行效果我們可以看到內層box的上邊確實與外層container有了10px的間距，但是外層的container變高了，變高的部分剛好是我們設定的padding-top的大小。
結論：padding會撐大原來元素的總寬高，如果要想確保原來元素的總寬高不變，在設定了padding以後需要相應的調整元素本身width和height的值。
元素（盒模型）總寬 = border-left + border-right + padding-left + padding-right + width
元素（盒模型）總高 = border-top + border-bottom + padding-top + padding-bottom + height
2、padding屬性符合：padding。
padding包含四個方向，分別是top、right、bottom、left，我們可以分別定義這四個的值，當然也可以進行合併定義，如下所示：
padding值
top值
right值
bottom值
left值
總結padding:10px;
10px
10px
10px
10px
4個方向值相同
padding:10px 15px;
10px
15px
10px
15px
第乙個值：上下
第二個值：左右
padding:10px 5px 20px;
10px
5px20px
5px第乙個值：上
第二個值：左右
第三個值：下
padding:10px 5px 15px 20px;
10px
5px15px
20px
第乙個值：上
第二個值：右
第三個值：下
第四個值：左
padding的介紹介紹到此，你會不會被搞暈了呢？動起手來寫一寫看一看吧。
CSS 內邊距 padding 例項
css 內邊距 padding 例項 元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。css padding 屬性定義元素邊框與元素內容之間的空白區域。css 內邊距屬性 屬性 描述 padding 簡寫屬性。作用是在乙個宣告中設定元素的所內邊距屬性。padding ...
CSS盒模型之內邊距padding
css 盒模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容，直接包圍內容的是內邊距 padding 內邊距呈現了元素的背景。內邊距的邊緣是邊框 border 邊框以外是外邊距 margin 外邊距預設是透明的，因此不會遮擋其後的任何元...
css盒子模型之內邊距（padding）
知識點一 是內邊距，使用什麼屬性控制？元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。css padding 屬性定義元素邊框與元素內容之間的空白區域。知識點二 padding可以接受什麼值？padding 屬性接受長度值或百分比值，但不允許使用負值。案例 例如，如果...