CSS Properties - 元素尺寸

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

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: 寬度比例 / 高度比例。