Box model 盒模型

https://web.dev/learn/css/box-model 翻譯

假設你有這段 HTML：

<p>我是一段包含幾個字詞的文字段落。</p>

接著，你為它編寫了這段 CSS：

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

結果內容最後寬度變成了 142px，而不是你指定的 100px，而且還超出了元素的範圍。這是為什麼呢？

盒模型（Box Model） 是 CSS 的核心基礎。了解盒模型的工作原理、它如何受到 CSS 其他方面的影響，以及更重要的——你該如何控制它，能幫助你寫出更易於預測（符合預期）的 CSS。

INFO

請務必記住，CSS 所顯示的一切都是一個「盒子」，即便它只是一些文字，或是設定了 border-radius（邊框圓角）使其看起來像個圓形。

內容與尺寸

盒子的行為會根據其 display 屬性值、設定的維度（尺寸）以及所包含的內容而有所不同。這些內容可以是純文字，也可以是由子元素產生的更多盒子。無論是哪種情況，在預設情況下，內容都會影響盒子的大小。

你可以透過以下方式來控制：使用外在尺寸 (Extrinsic sizing)或是使用內在尺寸 (Intrinsic sizing)，讓瀏覽器根據內容大小為你做出決定。

這裡有一個基礎示範，用來解釋這兩者的差異：

範例中有個盒子，裡面寫著 「CSS is awesome」，並設定了固定尺寸與粗邊框。由於該盒子有指定的寬度，因此它是屬於外在尺寸 (extrinsically sized)。這意味著盒子本身會控制其子內容的大小。

然而，「awesome」這個單字對盒子來說太大了，所以它溢出 (overflow) 到了父元素的邊框盒 (border box) 之外（稍後會詳細介紹）。防止這種溢出的一種方法是讓盒子使用內在尺寸 (intrinsically sized) —— 方式是不設定寬度，或者在此範例中，將寬度設為 min-content。

min-content 關鍵字會告訴盒子，其寬度只需要跟內容的內在最小寬度（即「awesome」這個單字的長度）一樣寬即可。這能讓盒子完美地貼合文字。

範例一：固定外部尺寸 vs 內在尺寸

<div class="wrapper">
  <div>
    <p>外部尺寸 (width: 100px)</p>
    <div class="box fixed-width">
      CSS IS AWESOME
    </div>
  </div>

  <div>
    <p>內在尺寸 (width: min-content)</p>
    <div class="box intrinsic-width">
      CSS IS AWESOME
    </div>
  </div>
</div>

.wrapper {
  display: flex;
  gap: 40px;
  font-family: sans-serif;
}

.box {
  border: 5px solid #333;
  padding: 10px;
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* 1. 固定外部尺寸：固定寬度導致溢出 */
.fixed-width {
  width: 100px;
  background-color: #fee2e2; /* 淺紅色背景 */
}

/* 2. 內在尺寸：使用 min-content 完美貼合 */
.intrinsic-width {
  width: min-content;
  background-color: #dcfce7; /* 淺綠色背景 */
}

外在尺寸 (width: 100px)

CSS IS AWESOME

內在尺寸 (width: min-content)

CSS IS AWESOME

INFO

為元素設定固定寬度時，若內容超過指定寬度，就會發生 overflow 溢出。

範例二

使用 min-content 製作緊湊卡片

盒子寬度會剛好等於最長的單字「Extraordinary」：

CSS is Extraordinary and Powerful

原理： 瀏覽器會嘗試將盒子縮到最小，但不讓內容溢出。 因此，它會找出內容中「不可分割的最小寬度」（在此例中是單字長度），並以此作為盒子的寬度。