CSS: Box Model
date
Apr 29, 2024
slug
css-box-model
status
Published
tags
CSS
Frontend
summary
type
Post
CSS 的世界裡，Box 可以拆分為四個區塊，由內而外分別為：
- Content Area
- Padding Area
- Border Area
- Margin Area
而常見的 CSS 屬性
box-sizing 便是決定元素的寬高需要涵括到哪些區域，預設的 content-box 只會計算進 Content Area，如果設定成 border-box 的話則會涵括 Content, Padding, Border 三塊。content-box 容易造成計算上的困難，當想要用寬度來定義容器大小時，就需要小心 padding 和 border 不在寬度所限的範圍內！