# CSS間距
### 内補白（内更新檔）
```
padding： 檢索或設定對象四邊的内部邊距,如padding:10px; padding:5px 10px;
padding-top： 檢索或設定對象頂邊的内部邊距
padding-right： 檢索或設定對象右邊的内部邊距
padding-bottom：檢索或設定對象下邊的内部邊距
padding-left： 檢索或設定對象左邊的内部邊距
```
### 外補白（外更新檔）
```
margin： 檢索或設定對象四邊的外延邊距,如 margin:10px; margin:5px auto;
margin-top： 檢索或設定對象頂邊的外延邊距
margin-right： 檢索或設定對象右邊的外延邊距
margin-bottom： 檢索或設定對象下邊的外延邊距
margin-left： 檢索或設定對象左邊的外延邊距
```
**margin相關技巧**
```angularjs
1、設定元素水準居中： margin:x auto;
2、margin負值讓元素位移及邊框合并
```
# 盒子模型
元素在頁面中顯示成一個方塊，
類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，
幫助我們設定元素對應的樣式。
> 把元素叫做盒子，設定對應的樣式分别為：
> 盒子的邊框(border)、盒子内的内容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
```angularjs
盒子真實尺寸
盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
```
在布局中，如果我想增大内容和邊框的距離，又不想改變盒子顯示的尺寸
```angularjs
box-sizing：content-box | border-box
```
# 塊元素,内聯元素,内聯塊元素
> 元素就是标簽，布局中常用的有三種标簽，塊元素、内聯元素、内聯塊元素，
>了解這三種元素的特性，才能熟練的進行頁面布局。
### 塊元素
塊元素，也可以稱為行元素，布局中常用的标簽如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，
它在布局中的行為：
- 支援全部的樣式
- 如果沒有設定寬度，預設的寬度為父級寬度100%
- 盒子占據一行、即使設定了寬度
### 内聯元素
内聯元素，也可以稱為行内元素，布局中常用的标簽如：a、span、em、b、strong、i等等都是内聯元素，它們在布局中的行為：
- 支援部分樣式（不支援寬、高、margin上下）
- 寬高由内容決定
- 盒子并在一行
- 代碼換行，盒子之間會産生間距
- 子元素是内聯元素，父元素可以用text-align屬性設定子元素水準對齊方式，用line-height屬性值設定垂直對齊方式
### 内聯塊元素
内聯塊元素，也叫行内塊元素，是新增的元素類型，現有元素沒有歸于此類别的，img和input元素的行為類似這種元素，但是也歸類于内聯元素，它們在布局中表現的行為：
- 支援全部樣式
- 如果沒有設定寬高，寬高由内容決定
- 盒子并在一行
- 代碼換行，盒子會産生間距
- 子元素是内聯塊元素，父元素可以用text-align屬性設定子元素水準對齊方式，用line-height屬性值設定子元素垂直對齊方式
# 塊元素,内聯元素,内聯塊元素之間的轉換
display屬性是用來設定元素的類型及隐藏的，常用的屬性有：
1、none 元素隐藏且不占位置
2、block 元素以塊元素顯示
3、inline 元素以内聯元素顯示
4、inline-block 元素以内聯塊元素顯示
轉載于:https://www.cnblogs.com/zifeng001/p/10828328.html