【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！

更新於 2024/09/27發佈於 2021/09/28閱讀時間約 5 分鐘

說到網頁、前端最基礎、面試也最應該要準備的問題就是：到底什麼是所謂的 CSS Box Model（盒模型）呢？

在我初學網頁開發的時候曾抱有一種心態，那就是：「不論是什麼作法，能動就是好辦法。」

然而這個想法到了要建置 RWD 網站的時候可讓我吃了不少悶虧，尤其是在 CSS Box Model 這一塊。

對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。

然而沒有進行良好的推擠時，很有可能會讓使用者縮放網頁大小時，而產生不良的破版效果。

會有這樣的問題在於：你可能對於 CSS Box Model 很不熟！

➤ CSS Box Model 到底是什麼？

CSS Box Model 是針對每一個 HTML 元素在網頁上所佔空間計算的一種模型，其中會影響到 HTML 元素的空間要素，從外至內包含：margin、border、padding 及元素主要內容：

Chrome Dev Tools

這裡針對每個 Box Model 中的要素來進行簡單的介紹：

Box Model 中的要素，會影響到整個元素的大小，舉例來說：有一個 font-size 為 50px 的 h1 標籤，目前上下各有 25px 的 padding，請問現在 h1 的高度是 50px 還是 100px 呢？

我相信你應該知道答案是後者了，只要是 Box Model 中包含的要素，都會直接影響到元素本身的大小。

然而另外一個問題又來了，如果我們網頁元素會一直隨著 Box Model 中的 margin、border、padding 改變的話，我要怎麼很精準的控制網頁元素的大小呢？

這時候我們可以使用一 CSS 個語法：

讓所有盒模型的內的元素會以我們定義的 width 作為盒模型的大小，一旦元素中會有需要使用任何空間上的推擠，盒模型依然會以我們定義的 width 大小為準。

舉例來說：

透過上方的程式碼，你會發現不論內層元素怎麼推擠，應用了 box-sizing: border-box; 的所有元素都不會因為其他空間的推擠導致整體大小大於 300px。

最後一個只要是身為開發者，都會曾感到困惑的一個問題：到底什麼時候用 padding？什麼時候用 margin 呢？

其實我們可以在一個我們想要開發的網頁元素上，以「功能性」為單位，套上 Box Model 思考看看，這一個功能的邊界是在哪裡？

如果是邊界（border）以外的地方，就會使用 margin 來創造「元件與元件」之間的距離，這一點可會在使用框架時更顯而易見。

因為我們不能確定當我們引入該元件後，此元件與其他元件的間距會是多少，所以都會在引入元件後，再把間距（maring）加上去，舉例來說：

紅色箭頭的地方我們就會使用 margin 來推擠出功能區塊語區塊間的距離（通常會是上下的地方，橫向的部分為了避免破版使用 Flex box 來排列會更合適），也就是我們常講的外距了。

讓我們來看看另外一個例子：

藍色箭頭的地方是屬於邊界（border）以內的距離，所以我們會向內使用 padding 來推擠出內距，以平面設計的概念來說，就有點像是創造出血線的感覺。

對於初學者來說，確實要判斷何時使用 margin 與 padding，確實需要花一段時間累積。

如果想要加快自己對於網頁切版的概念的話，其實可以試著做以下練習：

如果是有想要求職的朋友，也可以嘗試自己撰寫一篇關於 Box Model 的文章或是筆記，這個概念可以說是前端非常重要，也是面試常常會出現的考題，過自己撰寫、練習過一遍，非常有助於自己釐清不懂的地方。

如果你很疑惑，自己為什麼無法正確控制 HTML 元素的寬高，你還可以參考：

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於我：

2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。

｜聯絡我：vivian.enlife@gmail.com

此篇文章會顯示動態置底廣告

為什麼會看到廣告