【CSS】- Box Modal（盒模型）

Box Modal

• 每個元素都會有 Box Modal ，有時候會忘記各自的範圍，以下圖片是我覺得最清楚最好了解的範例。

Box Model 的 Box 指的是 Border 以內（包含 Border）的範圍。

• Content：text 或 image 等等。
• Padding：在 Content 外面，Border 裡面的範圍。
• Border：Box 的範圍，Border Width 包含在 Box 裡面。
• Margin：在兩個 box 之間的空間範圍。

• Fill Area：設定 background color 或是 background image 所填滿的範圍。

box-sizing : border-box

一般來說，設定元素的 width 跟 height ，指的是 content 的 width 跟 height，但如果加上 padding 、 border ，整個元素的長寬就會跟我們設定的 width 跟 height 不一樣，看起來比較不直覺。

所以有一個屬性是 box-sizing 可以設定為 border-box，這樣在元素設定 width 跟 height 時，就會設定成 box 的長寬（包含 border width）。

在設定元素的長寬時就會更直覺喔！

參考

圖片來源：Udemy-advanced css course