Box Model / Units / Typography：畫面上的尺寸到底怎麼算

Learning outcomes

• 能計算 content-box / border-box 尺寸差異。
• 能依情境選 px/%/rem/vw/ch 等單位。
• 能使用 min/max 限制內容寬度。
• 能用 DevTools Box Model 找 overflow root cause。

1. Box model

.card {
  width: 320px;
  padding: 24px;
  border: 2px solid;
  margin: 16px;
}

2. box-sizing

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

border-box 讓 declared width 包含 padding/border，更容易控制 layout。但 margin 仍在盒子外。

3. Units 是 reference frame

4. Fluid constraints 比固定寬度更耐用

.page {
  width: min(
    100% - 2rem,
    70rem
  );
  margin-inline: auto;
}

.prose {
  max-width: 70ch;
}

5. Typography 影響 layout

body {
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-size:
    clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
}

文字不是最後才「裝飾」；line-height、measure、font size 都會改 element intrinsic dimensions。

Project checkpoint：Course Profile v5

.profile {
  width:
    min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.card {
  padding: 1.25rem;
  border: 1px solid #d9e2ed;
  border-radius: 1rem;
}

.card p {
  max-width: 65ch;
}

Debug evidence：橫向捲軸從哪來

先在 DevTools 看是哪個 element border box 超出 viewport，再檢查 fixed width、padding、long unbreakable content、absolute/fixed positioning；不要直接全站加 overflow-x:hidden 把證據藏掉。