跳到主要內容
前端開發

CSS box-sizing 筆記

2020 年記錄 box-sizing 如何讓 padding 與 border 計入元素設定的寬高。

W

這邊記錄 box-sizing

box-sizing: border-box 可以把 padding 與 border 計入設定的 widthheight,避免元素的實際尺寸向外增加。

兩個相同寬高、邊框與內距的方塊,未設定 box-sizing 的方塊較大,設定 border-box 的方塊維持 50px

2026 年後記

box-sizing: border-box 現在仍普遍使用,通常會連同偽元素一起設為全域規則。

分享這篇