今天來介紹 CSS 的 box-sizing 屬性。

前言

「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加了解 CSS 的原理，讓我在切版的時候可以更加確定自己在做什麼，我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中，會將 Spec 內看到的資料整理成這個系列，也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog，如果想直接看文內的程式碼 Demo 畫面，可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於：

• iT 邦幫忙
• Titangene Blog

box-sizing 屬性用於設定如何計算元素的總寬度和總高度。

下圖是 box-sizing 屬性的定義：

可以看到 box-sizing 屬性可以用在任何元素，而且初始值為 content-box。

在 CSS box model 中，對元素指定寬度和高度會應用於 content box，如果又在該元素設定 border 或 padding 時，在視覺上會很像是增加元素的大小。也就是說當你想要讓該元素為某寬度或高度時，需要自行手動減去 border 或 padding 所佔用的空間，才能讓元素符合原本預期的寬高。

例如：

<div class="box-1"></div>
<div class="box-2"></div>

.box-1 {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
}
.box-2 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, .4);
  padding: 10px;
  border: 10px solid;
  margin: 10px;
}

如下圖，.box-1 元素和 .box-2 元素的 width 和 height 都一樣 (都是 100px)：

但是可以看出這兩個元素的大小明顯不同，這是因為 .box-2 元素比 .box-1 元素多了 padding 和 border：

各元素在視覺上所佔用的空間：

• .box-1 元素：
  • 寬：width (100px)
  • 高：height (100px)
• .box-2 元素：
  • 寬佔用：border-left-width (10px) + padding-left (10px) + width (100px) + padding-right (10px) + border-right-width (10px) = 140px
  • 高佔用：border-top-height (10px) + padding-top (10px) + height (100px) + padding-bottom (10px) + border-bottom-height (10px) = 140px

如果要 .box-2 元素要保留 border 和 padding，又要只佔用寬度和高度各 100px 就只能手動減去 border 或 padding，以上面範例就會改成這樣：

.box-2 {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, .4);
  padding: 10px;
  border: 10px solid;
  margin: 10px;
}

雖然在視覺上，.box-1 元素和 .box-2 元素所佔用的空間變成一樣了，但是要自行計算 width 和 height 會很麻煩。這時就可以改用 box-sizing: border-box，它就會幫你自動計算扣除 border 或 padding 所剩餘的空間，應用在 content width 和 content height。

.box-2 {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, .4);
  padding: 10px;
  border: 10px solid;
  box-sizing: border-box;
  margin: 10px;
}

如下圖，不用修改 width 和 height 就可以達到預期的效果：

資料來源：

• CSS Basic User Interface Module Level 3 (CSS3 UI)