CSS 盒模型

CSS 會將每個元素排版為一個或多個方盒。基本方盒由內向外包含內容、內距、邊框與外距。只有先確認宣告的尺寸控制哪個邊緣後，寬度計算才會變得可預測。

內容與邊框尺寸 #

初始的 box-sizing 值為 content-box：

css

.card {
  box-sizing: content-box;
  width: 20rem;
  padding: 1rem;
  border: 0.25rem solid;
}

算繪後的 border-box 寬度為 22.5rem：20 rem 的內容、2 rem 的水平內距，以及 0.5 rem 的邊框。

border-box 會將內距與邊框納入宣告的尺寸：

css

.card {
  box-sizing: border-box;
  width: 20rem;
  padding: 1rem;
  border: 0.25rem solid;
}

內容寬度會變成 17.5rem，而邊框方盒仍維持 20 rem。border-box 對元件很實用，因為加入內距不會讓宣告的百分比或固定寬度超出其配置空間。在這兩種尺寸模型中，外距都位於外部，因此仍可能使佔用區域寬於宣告的尺寸。

box-sizing 預設不會被繼承。繼承式重設可讓元件在必要時覆寫根元素的值：

css

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

納入虛擬元素很重要，因為裝飾性邊框與產生的內容也會建立方盒。

內距屬於元素，並會接收其背景。外距位於邊框外部，且保持透明。在正常流程中，區塊之間的垂直外距可能會摺疊；內距、邊框、彈性配置、網格配置與新的區塊格式化內容會改變這項行為。

彈性或網格項目、浮動元素、絕對定位方盒之間的外距不會摺疊，區塊格式化內容邊界兩側的外距也不會摺疊。當沒有邊框、內距、行內內容、清除效果或新的格式化內容將其分隔時，父元素與第一個或最後一個子元素的外距可能會摺疊。

在水平書寫模式中，百分比內距與外距會依包含區塊的行向尺寸解析，垂直內距也一樣。當間距屬於配置而非個別項目時，在彈性與網格容器內優先使用 gap。

overflow 控制超出內距方盒的內容：

css

.panel {
  max-block-size: 24rem;
  overflow: auto;
}

傳統捲軸會在邊框方盒內佔用空間。覆蓋式捲軸則不會，因此應避免將捲軸寬度硬編碼。

css

.panel {
  scrollbar-gutter: stable;
}

scrollbar-gutter 可以為傳統捲軸預留空間，並避免溢位開始時發生版面位移。對覆蓋式捲軸而言，它不會產生可見的捲軸溝槽效果。

彈性與網格項目具有自動最小尺寸，而這些尺寸可以由其最小內容貢獻推導。因此，即使軌道或彈性項目看似具有彈性，無法斷行的長標記仍可能溢出版面。明確允許縮小：

css

.content {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

替換元素（例如圖片）具有內在尺寸與外觀比例。請在不造成失真的情況下限制它們：

css

img,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

邏輯屬性會描述相對於書寫模式的尺寸：

css

.notice {
  inline-size: min(100%, 40rem);
  padding-block: 1rem;
  padding-inline: 1.5rem;
  border-inline-start: 0.25rem solid currentColor;
}

在水平書寫模式中，inline-size 對應於寬度，而 block-size 對應於高度。邏輯屬性能在從右至左的文字與垂直書寫模式中保留版面配置意圖。

瀏覽器測量 API 會公開不同的邊緣：clientWidth 包含內距，offsetWidth 包含邊框，而 getBoundingClientRect() 會傳回經變形的邊框方盒。請選擇符合目前討論方盒的 API，而不是以固定常數進行補償。