DAY12 介紹盒子模型

2026 iThome 鐵人賽

DAY 12

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 12 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-26 10:02:40

56 瀏覽

分享至

什麼是盒子模型？

在進入CSS排版的世界時，有一個至關重要的核心觀念必須先建立：在瀏覽器的眼中，網頁上的每一個HTML元素，本質上都是一個「矩形的盒子」。

不管這個元素在畫面上看起來是一行文字、一張圓形圖片，還是按鈕，瀏覽器在計算它所佔用的網頁空間時，都會使用一個矩形方框來包覆它，而這個用來決定元件大小、內外間距與邊框的幾何結構，就叫做盒子模型（Box Model），如果缺乏盒子模型的觀念，在未來調整網頁版面時，元件之間就會經常出現排版錯位、莫名其妙被擠到下一行的現象。

盒子模型由內到外，一共由以下四個核心層級依序組合而成：

內容區域（Content）：盒子最核心的部分，用來放置真正的物件，例如文字段落或是圖片本身。它的範圍由width（寬度）與height（高度）來控制。
內邊距（Padding）：位於內容與外框之間的「留白空間」，增加Padding可以讓裡面的文字不會緊貼著邊框，在設計時，適當的內邊距能營造出舒適的「呼吸感」，是提升網頁視覺質感的重要關鍵。
邊框（Border）：包覆在內邊距外圍的「線條外框」，你可以自由控制邊框的粗細、線條樣式（如實線solid、虛線dashed）以及顏色，在視覺上用來區隔不同的區塊。
外邊距（Margin）：邊框以外的「推開空間」，它負責推開其他相鄰的盒子，用來決定元件與元件之間的物理距離。注意：外邊距是透明的，它不會帶有盒子本身的背景顏色。

四個方向的控制與縮寫

在實際編寫CSS時，不論是margin還是padding，我們都可以對「上、右、下、左」四個方向進行單獨的精準控制（例如margin-top或是 padding-left）。

當我們想要同時設定多個方向時，CSS提供了非常實用的縮寫觀念，這套縮寫是根據**「順時針」**的邏輯來運作的：

四個數值：margin: 10px 20px 30px 40px;（代表依序設定：上10px、右20px、下30px、左40px）。
兩個數值：margin:10px 20px;（代表：上下為10px、左右為20px），這在網頁排版中是非常常見且實用的。

盒子模型的幾何空間計算

在最開始接觸開發時，最常遇到的問題是：「為什麼我明明設定了寬度200像素，但在網頁畫面上看起來卻比200像素還要大？」

這是因為在預設情況下，瀏覽器計算一個盒子在網頁上實際佔用的總寬度，是有一套自己的公式的，計算方式如下：
實際總寬度=內容寬度(width)+左右內邊距(Padding)+左右邊框(Border)

也就是說，如果你給了內容寬度，又額外加上了Padding與Border，這個盒子就會被往外撐大

範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day12 盒子模型範例</title>
    <style>
        .box {
            /* 內容區域大小 */
            width: 200px;
            height: 100px;
            background-color: lightblue;

            /* 內容與邊框之間留20像素 */
            padding: 20px;

            /* 邊框為5像素寬的黑色實線 */
            border: 5px solid black;

            /* 外邊距30像素 */
            margin-bottom: 30px;
        }
    </style>
</head>
<body>

    <div class="box">
        我是第一個盒子，可以觀察看看我的邊框與內外留白。
    </div>
    
    <div>
        我是下方的另一個元件。
    </div>

</body>
</html>

在這個範例中，.box的內寬度雖然是200px，但因為加上了左右各20px的Padding（共40px），以及左右各5px的Border（共10px），所以它在網頁畫面上實際呈現的視覺總寬度會是250px（200+40+10）。而margin-bottom則成功將下方的元件往下拉開了30px的距離。

總結

今天我們完整的拆解了盒子模型的四個層級（Content、Padding、Border、Margin），並學到了順時針的方向縮寫邏輯，以及網頁元件實際總寬度的計算公式。
明天我們將延續盒子模型的觀念，介紹一個在現代前端開發中非常重要屬性：box-sizing: border-box;，我們將會了解如何改變瀏覽器的預設行為，讓盒子的尺寸計算變得更加直覺、不會再因為加上內邊距而悄悄爆開。