【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！
更新於 2024/09/27閱讀時間約 5 分鐘
說到網頁、前端最基礎、面試也最應該要準備的問題就是：到底什麼是所謂的 CSS Box Model（盒模型）呢？
在我初學網頁開發的時候曾抱有一種心態，那就是：「不論是什麼作法，能動就是好辦法。」
然而這個想法到了要建置 RWD 網站的時候可讓我吃了不少悶虧，尤其是在 CSS Box Model 這一塊。
對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
然而沒有進行良好的推擠時，很有可能會讓使用者縮放網頁大小時，而產生不良的破版效果。
會有這樣的問題在於：你可能對於 CSS Box Model 很不熟！
➤ CSS Box Model 到底是什麼？
CSS Box Model 是針對每一個 HTML 元素在網頁上所佔空間計算的一種模型，其中會影響到 HTML 元素的空間要素，從外至內包含：margin、border、padding 及元素主要內容：
這裡針對每個 Box Model 中的要素來進行簡單的介紹：
- Margin：與外層元素的間距。
- Border：元素的邊界。
- Padding：元素邊界至主要內容的間距。
Box Model 中的要素，會影響到整個元素的大小，舉例來說：有一個 font-size 為 50px 的 h1 標籤，目前上下各有 25px 的 padding，請問現在 h1 的高度是 50px 還是 100px 呢？
我相信你應該知道答案是後者了，只要是 Box Model 中包含的要素，都會直接影響到元素本身的大小。
➤ 切版好幫手：box-sizing
然而另外一個問題又來了，如果我們網頁元素會一直隨著 Box Model 中的 margin、border、padding 改變的話，我要怎麼很精準的控制網頁元素的大小呢？
這時候我們可以使用一 CSS 個語法：
讓所有盒模型的內的元素會以我們定義的 width 作為盒模型的大小，一旦元素中會有需要使用任何空間上的推擠，盒模型依然會以我們定義的 width 大小為準。
舉例來說：
透過上方的程式碼，你會發現不論內層元素怎麼推擠，應用了 box-sizing: border-box; 的所有元素都不會因為其他空間的推擠導致整體大小大於 300px。
➤ 到底什麼時候用 margin & padding ？
最後一個只要是身為開發者，都會曾感到困惑的一個問題：到底什麼時候用 padding？什麼時候用 margin 呢？
其實我們可以在一個我們想要開發的網頁元素上，以「功能性」為單位，套上 Box Model 思考看看，這一個功能的邊界是在哪裡？
如果是邊界（border）以外的地方，就會使用 margin 來創造「元件與元件」之間的距離，這一點可會在使用框架時更顯而易見。
因為我們不能確定當我們引入該元件後，此元件與其他元件的間距會是多少，所以都會在引入元件後，再把間距（maring）加上去，舉例來說：
紅色箭頭的地方我們就會使用 margin 來推擠出功能區塊語區塊間的距離（通常會是上下的地方，橫向的部分為了避免破版使用 Flex box 來排列會更合適），也就是我們常講的外距了。
讓我們來看看另外一個例子：
藍色箭頭的地方是屬於邊界（border）以內的距離，所以我們會向內使用 padding 來推擠出內距，以平面設計的概念來說，就有點像是創造出血線的感覺。
對於初學者來說，確實要判斷何時使用 margin 與 padding，確實需要花一段時間累積。
如果想要加快自己對於網頁切版的概念的話，其實可以試著做以下練習：
- 找一個你喜歡的網站
- 按右鍵「檢查」進到瀏覽器中的開發者工具
- 觀察其他開發者是怎麼進行頁面的排版
如果是有想要求職的朋友，也可以嘗試自己撰寫一篇關於 Box Model 的文章或是筆記，這個概念可以說是前端非常重要，也是面試常常會出現的考題，過自己撰寫、練習過一遍，非常有助於自己釐清不懂的地方。
如果你很疑惑，自己為什麼無法正確控制 HTML 元素的寬高，你還可以參考：
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在本章節中，我們介紹了 CSS 偽元素的基本概念和常見用法，通過一些示例，我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外，我們還探討了一些高級用法，如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
介紹 Tailwind CSS 工具並提供如何使用的方法
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在本章節中，我們介紹了 CSS 偽元素的基本概念和常見用法，通過一些示例，我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外，我們還探討了一些高級用法，如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
介紹 Tailwind CSS 工具並提供如何使用的方法