CSS Box Model 入門指南:新手必讀

更新日期: 2024 年 10 月 22 日

在學習 CSS 網頁佈局時,理解 CSS Box Model 是非常重要的。

Box Model 決定了元素如何佔據空間,如何顯示外邊距、內距、邊框,以及元素的實際大小。

這篇文章將帶你認識 CSS Box Model 的基本概念,並詳細介紹其中的四個關鍵部分:content boxpadding boxborder boxmargin

我們還會指出新手在處理 Box Model 時常犯的一些錯誤,幫助你更好地掌握這一核心知識。


什麼是 CSS Box Model?

CSS Box Model 是 CSS 的佈局設計基礎,它定義了每個 HTML 元素在網頁上如何佔據空間。

每個元素都被視為一個矩形盒子,由幾個部分組成。這些部分包括:

  • 內容區(Content Box):顯示元素內容的區域,例如文字、圖片等。
  • 內距區(Padding Box):圍繞內容的空白區域,用來確保內容不直接貼著邊框。
  • 邊框區(Border Box):包圍內距的邊框。
  • 外距區(Margin):元素與外部其他元素之間的間距。

這四個區域組成了一個元素的完整 “盒子”。

Box Model 的結構

+-------------------------------+
|           Margin               |
+-------------------------------+
|           Border               |
+-------------------------------+
|           Padding              |
+-------------------------------+
|           Content              |
+-------------------------------+

Box Model 的關鍵部分

content box(內容區)

content box 是 Box Model 中最內層的部分,表示元素的實際內容區域。

內容區的大小由元素的 widthheight 屬性決定,這是顯示文本、圖片或其他內容的空間。

範例:

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

在這裡,div 元素的 content box 寬度為 200px,高度為 100px。這是顯示內容的空間。

padding box(內距區)

padding box 是內容區與邊框之間的間距,它會將元素的內容推離邊框。

padding 的大小可以單獨設置,且會影響到元素的總尺寸(除非使用 box-sizing: border-box,稍後會詳細介紹)。

範例:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  background-color: lightblue;
}

在這個範例中,div 元素的 content box200px x 100px,但因為設置了 20px 的內距,整個 padding box 會增加,使內容與邊框有足夠的間距。

border box(邊框區)

border box 是圍繞內距的邊框。

border 定義了元素的邊界,並且可以設置邊框的寬度、樣式和顏色。

border 也會影響元素的總寬度和高度,除非你使用 box-sizing: border-box

範例:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightblue;
}

在這裡,div 元素除了內容和內距,還有 5px 的邊框,這會使元素的總寬度和高度進一步增加。

margin(外距區)

margin 是元素與其他元素之間的間距,它不會影響到元素的實際尺寸,但會影響到它在頁面中的位置。你可以為 margin 設置四個方向的不同值(上、右、下、左),或者使用簡寫語法。

範例:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  background-color: lightblue;
}

這段程式碼為 div 元素添加了 10px 的外距,這會使它與其他元素保持距離,但不會影響元素的總尺寸。


Box Model 計算範例

讓我們來看一個完整的例子,計算一個元素的實際大小。

範例:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  background-color: lightblue;
}

計算步驟:

  • 寬度
    • 內容寬度:200px
    • 內距寬度:左右各 20px → 20px + 20px = 40px
    • 邊框寬度:左右各 5px → 5px + 5px = 10px
    • 總寬度:200px + 40px + 10px = 250px
  • 高度
    • 內容高度:100px
    • 內距高度:上下各 20px → 20px + 20px = 40px
    • 邊框高度:上下各 5px → 5px + 5px = 10px
    • 總高度:100px + 40px + 10px = 150px

最終,這個 div 的總寬度是 250px,總高度是 150px


新手常犯的錯誤

忘記 paddingborder 會影響元素總大小

新手常常會設置一個元素的 widthheight,然後添加 paddingborder,卻忘記它們會影響元素的總尺寸。這可能導致佈局錯誤,例如元素超出預期大小。

解決方案:使用 box-sizing: border-box

為了防止 paddingborder 影響元素的總寬度和高度,可以使用 box-sizing: border-box,這樣元素的寬度和高度將包括 paddingborder

範例:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

在這個範例中,設置了 box-sizing: border-box 後,元素的總寬度和高度將始終保持為 200px 和 100px,不再增加 paddingborder 的大小。

忽略 margin 的影響

新手有時會忽略 margin 在佈局中的作用,尤其是上下相鄰元素的 margin 會發生重疊,這可能導致預期外的佈局問題。

解決方案:

檢查相鄰元素的 margin,並使用 paddingborder 來防止重疊。

錯誤理解百分比值

當使用百分比值設置 paddingmargin 時,新手常常誤以為這些百分比是基於元素的高度來計算,但實際上,paddingmargin 的百分比是基於父元素的寬度計算的


結論

理解 CSS 的 Box Model 是掌握網頁設計佈局的關鍵。

Box Model 由 content boxpadding boxborder boxmargin 組成,每個部分對元素的顯示和尺寸計算都有重要影響。

新手常常忽略 paddingborder 對元素尺寸的影響,或未正確理解 margin 的作用。

通過這篇文章的介紹,希望你能夠深入理解 CSS Box Model,並避免常見錯誤,讓你的佈局更加精確與靈活。

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *