CSS間距
很多時候我們為了美觀，需要對內容進行留白設置，這時候就需要設置間距了。
內補白
設置元素的內間距
-
padding： 檢索或設置對象四邊的內部邊距
padding:10px;
-
上下及兩邊設置
padding:5px 10px;
-
由上邊界開始，順時針設置
padding:10px 20px 30px 40px
-
單邊設置
- padding-top： 檢索或設置對象頂邊的內部邊距
- padding-right： 檢索或設置對象右邊的內部邊距
- padding-bottom：檢索或設置對象下邊的內部邊距
- padding-left： 檢索或設置對象左邊的內部邊距
外補白
設置元素的外間距
- 將padding換成margin，用法同上
- 注意: 在使用padding與margin的時候,會改變我們元素的實際大小
解決方案 ↓↓↓
margin相關技巧
- 設置元素水平居中： margin:x auto;
- 上方法只能用於水平居中，不可用於垂直居中
- margin負值可以讓元素位移及邊框合並
盒子模型
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。
把元素叫做盒子，設置對應的樣式分別為：
- 盒子的邊框(border)
- 盒子內的內容和邊框之間的間距(padding)
- 盒子與盒子之間的間距(margin)。
盒子真實尺寸
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
在布局中，如果我想增大內容和邊框的距離，又不想改變盒子顯示的尺寸
box-sizing: content-box 外補白
box-sizing: border-box 內補白