CSS 習作｜認識 Box Model 運作原理，padding 和 margin 的使用時機是什麼？
更新於 2024/07/01閱讀時間約 9 分鐘
救命！老師我..我..，好像陷入某種魔障 🧟
學習來到第 11 天，本篇習作內容要加強自我對 CSS Box Model 的觀念，也是在實作練習中發現自己雖然看似理解了盒模型，但其實在應用上尚不熟悉，因此藉由筆記重新梳理和練習，將 CSS Box Model 的基礎觀念整理並釐清，一起來看看吧！
CSS Box Model 是什麼？
CSS 盒模型的本質是一個 包裹每個 HTML 元素的盒子，指的是一個元素在畫面中所佔面積，它的組成包括：margins、borders、padding 以及內容，而每一個 HTML 元素都是一個盒模型，一個完整網頁的畫面便由許多元素組成。
小考時間，試問：CSS「width: 200px」 是指哪裡的寬度呢？
如下列程式碼， 你心中認為 .box 的 width: 200px 是指哪裡的寬度呢？
請試著將心中的答案畫下來。
請試著將心中的答案畫下來。
.box{background: #4CA772;width: 200px;height: 200px;padding: 20px;border: 20px solid #000;margin: 20px;}
在還沒熟悉 CSS Box model 前，我的理解會是：
width 200px 指的是 margin + border + padding + 內容，但這其實是錯誤的理解觀念 🙅🏻，如下圖解析，正確的理解應該是： width 200px 指的是實際內容的寬度，並不包含 padding、border、margin。
width 200px 指的是 margin + border + padding + 內容，但這其實是錯誤的理解觀念 🙅🏻，如下圖解析，正確的理解應該是： width 200px 指的是實際內容的寬度，並不包含 padding、border、margin。
※另外需注意，本篇還沒有加入 box-sizing: border-box，因此僅以上述情境條件來理解 🙏🏻。
破除 width 的陷阱及障眼法
寫下一個 <div class="box"> ，並包裹一段文字內容，再為 .box 設置 width: 200px; ，並且加上背景底色，我們可以發現帶有 block 屬性的 <div> 本應該盡可能向左右兩方撐滿整個瀏覽器，但是因為設置了寬度後，元素以我們所設寬度呈現，且因為文字的數量並沒有達到寬度 200px，因此還有剩餘的一些綠色寬度，而 .box 的高度則是由文字來撐出高度 22.5，開啟檢查元素來看看：
接著，試著為 .box 加入高度 height: 200px;，並且增加文字數量，我們可以看到當一列文字達滿寬度 width 200 時便會換行，而因為設定了 height 200，文字數量超出高度因此畫面破版，呈現如下：
承上，我們繼續為 .box 加入 padding: 20px;，並刪除一些多餘的文字，開啟檢查元素來檢視，發現元素變成「240*240」，這是因為加入了 padding 20px，使上右下左都增加了間距 20px，畫面如下：
透過檢查元素發現綠色 padding 上右下左各增加了 20px ，使元素整體變成「240*240」，而藍色區塊的「200*200」則為 實際內容，也是一開始所設置的 width 200，而文字數量再怎麼增加也會被限制在這個 width 裡面：
需要注意的是，這裡的 width 指的是「實際內容的寬度」，而不是「整體的寬度」，如下圖，紅色線段為 width 200 寬度，而上右下左還各有 padding 20。因此，此時 元素整體的寬度是 width+padding。
如果我們再加上 border: 20px，使上右下左各增加 20px。
則元素整體寬度為 width+border+padding＝實際內容200px+ padding 40px+border 40px＝280*280
則元素整體寬度為 width+border+padding＝實際內容200px+ padding 40px+border 40px＝280*280
如果再增加 margin: 20px，使元素外距上右下左各增加 20px。
則元素整體在畫面所站面積為 width+border+padding+margin＝實際內容200px+ padding 40px+border 40px+margin 40px＝320*320
則元素整體在畫面所站面積為 width+border+padding+margin＝實際內容200px+ padding 40px+border 40px+margin 40px＝320*320
需要注意的是，增加 margin 不會改變元素自身盒模型內容寬度，但是會增加元素整體的寬度，也就是元素在畫面中的所佔所有面積。
Box Model 由以下所組成
來看看 w3schools 對 Box model 的組成與定義：
- 實際內容 Content - The content of the box, where text and images appear
- 元素內距 Padding - Clears an area around the content. The padding is transparent.
- 邊框線 Border - A border that goes around the padding and content.
- 元素外距 Margin - Clears an area outside the border. The margin is transparent.
- The box model allows us to add a border around elements, and to define space between elements.
為了在所有瀏覽器中正確設置元素的寬度和高度，我們需要瞭解盒模型的運作原理，而當使用 CSS 設置元素的寬度和高度屬性時，只需設置內容區域的寬度和高度，因為要計算元素的完整整體大小，還必須加上 padding、border、margin ，才是元素完整在畫面中所佔面積。
到底 margin 和 padding 要用在什麼時候？
在進行預習課程中，實作練習時我也遇過這樣的疑問：到底什麼時候用 margin？什麼時候用 padding？
💡 在詢問課程助教後，助教給予我的常見分法觀念是：
父層元素到子層元素的距離稱為內距，內距可以使用 padding
而相同層級的元素彼此間的距離屬於外距，使用 margin。
而相同層級的元素彼此間的距離屬於外距，使用 margin。
這個理解和說明讓我醍醐灌頂！
Margin 指的是一個元素 border 之外的周圍空間，可用於兩元素之間的距離，有點像是排隊的時候，你會和前後的人保持一段距離，而不是緊貼前後兩人排隊，同理，吃草莓夾心吐司的時候，草莓醬和吐司之間就沒有所謂的 margin，兩者是緊鄰對方的。（這樣的比喻別打我）
而 padding 指的是一個元素的內容至 border 間的周圍空間，可以想像如果你變胖了，身上就會腫一圈脂肪，腫出來的那一圈就是 padding，皮膚表層則是 border。
在 border 以外，將 margin 用於「元素與元素間的距離」，在 border 以內，將 padding 用於「元素內容至 border 之間的空間」，以下圖 Google 首頁為例，檢查元素後可以觀察到「Google 搜尋」這顆按鈕，它在左右加入了 padding 來撐開按鈕的寬度，而 margin 則用來製造和「上方搜尋列」及右邊的「好手氣按鈕」這兩個元件間的距離。
再看另外一個例子，Dcard 的所有看板頁面中，看板分類的下拉選單利用 padding 增加選單列元素的面積，而不是用 margin 來增加面積。
劇場故事
理性邏輯上難以理解的話，可以用另一種方式來感受，也描繪了我內心對 padding 和 margin 的 感性理解。這一篇幅請各位輕鬆看待就好，不要太嚴肅。
下面是兩個 <div> ，.cat 和 .dog 之間的小故事：
未完待續。（喂！）
各位是否覺得：學習個 margin 和 padding 您的劇場會不會太多....
_(:3」ㄥ)_ 可是有感情有故事的 HTML 架構才有渲染力啊...
各位是否覺得：學習個 margin 和 padding 您的劇場會不會太多....
_(:3」ㄥ)_ 可是有感情有故事的 HTML 架構才有渲染力啊...
本篇參考學習資源
小結
透過本次習作，加深瞭解盒模型的運作原理，希望透過更多實際練習來熟悉盒模型間如何相互影響，且在不同 CSS 設計下又會有什麼樣的變化，在學習的過程中也發現可以多觀摩其他網站的 Box model 設計方式，從中觀察是如何使用 margin、padding，以及如合建構一個元素的盒模型、如何管理、規劃元件與元件的關係。
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而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
製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而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
製作校長盃 UI 設計首獎作品：實作元件切版過程中因為不夠了解Position的屬性而造成在對content內容排版一直跑掉，一開始想都使用Position來實作所有的排版，但是Position的absolute與fixed屬性在使用時元件將不再佔有一排，而下面的元件會自動向上遞補，就造成了排版
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
筆記一下，原本寫成overflow-y: auto，在windows chrome瀏覽器有y scroll bar，唯獨iPad沒有scroll bar，解法如下:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
本筆記參考:
1. h