【CSS 教學】什麼時候該使用 margin 、padding？前端都該要懂的盒模型！
閱讀時間約 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
412會員
97Content count
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而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 工具並提供如何使用的方法
自學程式的過程中，你總是把transform、transition，甚至是translate搞混嗎！為了分辨「轉變」的三個關係字，並理解到底什麼時候要用哪個屬性才正確，這篇筆記誕生了！
@import可以將一個style sheet 導入另一個style sheet
example:
匯入式:
連結式:
顧名思義，就是創造一個css的stylesheet，然後進行連結(link)
再來我們開啟***.css的頁面，再進行匯入
讀取順位請將@import放在css頁面的最前列。
突然看到有人在CSS的Tutorial放入這個符號，一下子把我弄迷糊了。
搞了半天*{}是全局佈署，只要有連接到該css的都會賦予相同屬性，不知道效果跟 html{}是不是一樣的？
這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而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 工具並提供如何使用的方法
自學程式的過程中，你總是把transform、transition，甚至是translate搞混嗎！為了分辨「轉變」的三個關係字，並理解到底什麼時候要用哪個屬性才正確，這篇筆記誕生了！
@import可以將一個style sheet 導入另一個style sheet
example:
匯入式:
連結式:
顧名思義，就是創造一個css的stylesheet，然後進行連結(link)
再來我們開啟***.css的頁面，再進行匯入
讀取順位請將@import放在css頁面的最前列。
突然看到有人在CSS的Tutorial放入這個符號，一下子把我弄迷糊了。
搞了半天*{}是全局佈署，只要有連接到該css的都會賦予相同屬性，不知道效果跟 html{}是不是一樣的？
這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！