盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)這就是盒模型。
padding用法:
1:padding是在盒子裡面，在盒子與內容之間。
2：padding的作用：控制子元素在父元素裡面的位置關係。
3：padding會把盒子撐大。
4：如果想讓盒子保持原有的大小：在寬高基礎上減掉。（ 如果乙個元素是被內容撐開的，沒有設定固定的寬高，padding直接撐開。不用減掉 ）
5:如果給單一方向新增padding
padding-top/bottom/left/right
6:padding的設定特點：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7:padding不會對背景圖的位置造成影響。
CSS盒模型之內邊距padding
css 盒模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容，直接包圍內容的是內邊距 padding 內邊距呈現了元素的背景。內邊距的邊緣是邊框 border 邊框以外是外邊距 margin 外邊距預設是透明的，因此不會遮擋其後的任何元...
CSS盒模型及排版
css盒模型由四部分組成 margin border padding content。外邊距 邊框 內邊距 內容。我們設定的width和height都是內容的大小，從而影響整個盒子的大小。盒子的佔位大小包括margin，但盒子的尺寸不包括margin。比如 盒子的高度 border width pa...
CSS盒模型及應用
注意事項 important 如果乙個盒子沒有給定寬度 高度或繼承父類的寬度 高度，盒子大小不受影響 新盒子 盒子大小就是寬度,padding width 包含在width中 box sizing border box 盒子計算尺寸 重點 box sizing content box 外盒尺寸計算 ...