[Back To Basic] CSS Box Sizing

在計算元素的寬高時，應該用哪種計算方式

• 預設

width + padding + border = 實際寬度
height + padding + border = 實際高度

這種作法在指定寬和高時，實際的寬高會比預期的還要大，這樣的現象會讓排版變得困難。

解決方式

box-sizing: border-box;

• box-sizing

width - padding - border = 實際寬度

height - padding - border = 實際高度

可加上以下語法通解

* {

  box-sizing: border-box;

}

source code