CSS 元素尺寸屬性：寬高、內距、外距與 box-sizing

元素尺寸的定義為非負值的數字。單位的設定可以參考這篇 單位表示法。

width

設定元素的寬度。

• max-content: 文字內容不會換行，寬度為內容的最大寬度。
• min-content: 寬度以內容最長的單字作為最小寬度。
• fit-content: 寬度為自動調整，相當於 auto 狀態。

height

設定元素的高度。

max-width

設定元素的最大寬度。此屬性會覆蓋 width 的設定。因此，可以防止 width 大於此屬性。

min-width

設定元素的最小寬度。此屬性會覆蓋 width 的設定。因此，可以防止 width 小於此屬性。

max-height

設定元素的最大高度。此屬性會覆蓋 height 的設定。因此，可以防止 height 大於此屬性。

min-height

設定元素的最小高度。此屬性會覆蓋 height 的設定。因此，可以防止 height 小於此屬性。

margin

設定邊界、外距。

margin 縮寫

margin-top

設定上邊界。

margin-right

設定右邊界。

• auto: 右邊界剩下的可用空間。

margin-bottom

設定下邊界。

margin-left

設定左邊界。

• auto: 左邊界剩下的可用空間。

小提醒

關於上、下邊界還有個重疊的現象，也有人會說 邊界重疊 或 邊界合併，請看這邊文章 邊界重疊。

padding

設定內距。

padding 縮寫

padding-top

設定上方內距。

padding-rignt

設定右邊內距。

padding-bottom

設定上方內距。

padding-left

設定左邊內距。

aspect-ratio

設定元素的比例。

aspect-ratio: 寬度比例 / 高度比例。

box-sizing 的差別

/* 預設：內距與框線加在寬度之外，總寬 240px */
.a { width: 200px; padding: 16px; border: 4px solid; }

/* border-box：內距與框線算在寬度之內，總寬 200px */
.b { box-sizing: border-box; width: 200px; padding: 16px; border: 4px solid; }

多數專案會在 樣式重置 中把全站設成 border-box，尺寸才好預測。

水平置中

.container {
  max-width: 1200px;
  margin-inline: auto;   /* 左右自動 */
  padding-inline: 24px;
}

max-width 比 width 適合響應式：空間夠時維持上限，不夠時自動縮小。

常見問題

padding 和 margin 差在哪？

padding 是框線以內的內距，會被背景色蓋到；margin 是框線以外的外距，是透明的。想讓背景一起變大用 padding，想拉開與別人的距離用 margin。

設定了寬度卻超出容器？

預設的 盒模型 下，內距與框線會加在設定的寬度之外。把 box-sizing 設成 border-box，寬度就會包含它們，這也是多數專案的預設寫法。

怎麼讓區塊水平置中？

給它一個寬度或最大寬度，再把左右外距設成 auto。若父層是 彈性盒子 或 格線容器，則有更直接的對齊屬性可用。

width 和 max-width 該用哪一個？

響應式版面 建議用 max-width。固定寬度在小螢幕上會撐破版面，最大寬度則能在空間足夠時維持上限、空間不足時自動縮小。

延伸閱讀

區塊模型邊界重疊單位表示法彈性盒子 flex