# CSS box model 簡介
###### tags: `CSS` `前端`

box model 是啥? 簡單來說每個 HTML 元素都可以用下面這張圖來檢視：

最裡面藍色的區塊就是元素本身，往外依序是 padding、border、margin

### padding
可透過 CSS 設定其寬度，會「往內」將元素撐開，目的是留白

### border
可透過 CSS 設定其寬度、樣式、顏色，會「往外」擴展元素的範圍
padding 與 border 的寬度會被計算在元素的寬、高，舉例來說：

.box {
    height: 100px;
    width: 100px;
    padding: 10px;
    border:10px solid black;
    margin: 10px;
}

.box 元素的實際寬度會是 100+10 * 2+10 * 2=140

### margin
可透過 CSS 設定其寬度，會「往外」擴展元素的範圍，與邊界以及其他元素保持間隔。
margin 不會計算在元素的寬、高

### 黑科技
由於元素的寬、高會被 padding, border 影響，為了再更改樣式的時候保持元素本身的大小，可以用 box-sizing 這個設定避免元素的大小改變

/* 所有元素都套用 border-box 的效果，可加入 reset.css */
*,*:before,*:after {
    box-sizing: border-box;
}