CSS 寬度與高度 (width / height)

CSS 提供多個屬性來控制元素的尺寸，包括 width、height 及其最大最小值。

width（寬度）

設定元素的寬度。

.box {
  width: 300px;       /* 固定寬度 */
}

.full {
  width: 100%;        /* 父元素的 100% */
}

.auto {
  width: auto;        /* 自動（預設） */
}

.fit {
  width: fit-content; /* 根據內容調整 */
}

常用值

height（高度）

設定元素的高度。

.box {
  height: 200px;      /* 固定高度 */
}

.full-height {
  height: 100%;       /* 父元素的 100% */
}

.viewport {
  height: 100vh;      /* 視窗的 100% */
}

.auto {
  height: auto;       /* 自動（預設，根據內容） */
}

max-width 和 min-width

限制元素的最大和最小寬度。

.container {
  width: 100%;
  max-width: 1200px;    /* 最大不超過 1200px */
}

.card {
  min-width: 200px;     /* 最小 200px */
  max-width: 400px;     /* 最大 400px */
}

響應式圖片

img {
  max-width: 100%;      /* 不超過容器寬度 */
  height: auto;         /* 保持比例 */
}

max-height 和 min-height

限制元素的最大和最小高度。

.sidebar {
  min-height: 100vh;    /* 至少填滿視窗高度 */
}

.modal {
  max-height: 80vh;     /* 最高不超過視窗的 80% */
  overflow-y: auto;     /* 超出時顯示捲軸 */
}

與 box-sizing 的關係

box-sizing 決定 width 和 height 包含哪些部分：

/* content-box（預設）：width/height 只包含內容 */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 實際寬度 = 200 + 20*2 + 5*2 = 250px */
}

/* border-box：width/height 包含 padding 和 border */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 實際寬度 = 200px */
}

實用範例

響應式容器

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

滿版區塊

.hero {
  width: 100vw;
  height: 100vh;
}

/* 避免水平捲軸 */
.hero {
  width: 100%;
  min-height: 100vh;
}

固定比例容器

/* 使用 aspect-ratio（現代方式） */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* 使用 padding 技巧（舊方式） */
.video-wrapper {
  width: 100%;
  padding-top: 56.25%;    /* 9/16 */
  position: relative;
}

彈性卡片

.card {
  width: 100%;
  min-width: 280px;
  max-width: 400px;
}

滿版圖片

.cover-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

限制文字區塊寬度

.article {
  max-width: 65ch;    /* 約 65 個字元寬度，適合閱讀 */
  margin: 0 auto;
}

尺寸相關函數

calc()

計算尺寸：

.sidebar {
  width: calc(100% - 300px);
}

.header {
  height: calc(100vh - 60px);
}

min() 和 max()

取最小或最大值：

.box {
  width: min(100%, 500px);    /* 等同於 max-width: 500px */
  width: max(200px, 50%);     /* 等同於 min-width: 200px */
}

clamp()

設定範圍：

.container {
  width: clamp(300px, 80%, 1200px);
  /* 最小 300px，最大 1200px，理想 80% */
}

.title {
  font-size: clamp(1rem, 5vw, 3rem);
}

行內元素的限制

行內元素（inline）無法設定 width 和 height：

/* 無效 */
span {
  width: 100px;     /* 不會生效 */
  height: 50px;     /* 不會生效 */
}

/* 改為 inline-block 後生效 */
span {
  display: inline-block;
  width: 100px;
  height: 50px;
}