Box Sizing

- Padding, Margin, Border

- Border Box vs Content Box 

Padding

- Box 裡面的間距

Margin

- Box 跟 Box 的間距

- Box 外面的間距

Border

邊界

範例

Content Box

Padding , Border 都算在Box 外面

Border Box

Padding , Border 都算在Box 裡面

- 以前只有content box， 算距離非常辛苦

-之後才有border-box

- 所以在開始寫CSS都會重設讓所有元件的預設是border-box

Block VS Inline

Block 

- 寬度佔全部

-換行

Inline 

- 寬度佔Box 的寬度

- 不會換行

範例

Inline

ex. span, img, a, b, strong, 

Block 

ex. div, section, nav, h1, footer