# CSS box-sizing: border-box explained
---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`


常常會看到有人在全域的程式碼放上這一行代表什麼意思呢?

常常在設定區塊的寬度的時候，會沒有考慮到padding導致它呈現的寬度比想像的寬，

所以常常需要多計算padding以及border的值相當麻煩。




然而這邊box-sizing可以把border以及padding而外多出來的空間直接往內縮，讓外框還是呈現一樣的寬度跟高度，就不需要多去計算一些麻煩的數值摟!

此圖有放入box-sizing


不過要注意一點，圖片的部分會被影響到大小因為這個全域的代碼

所以可以使用下方的代碼讓圖片的大小取決於物件內容而不是這個全域的代碼

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
img { box-sizing: content-box; }