CSS 習作｜認識 Box Model 運作原理，padding 和 margin 的使用時機是什麼？
救命！老師我..我..，好像陷入某種魔障 🧟
學習來到第 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。
※另外需注意，本篇還沒有加入 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
如果再增加 margin: 20px，使元素外距上右下左各增加 20px。
則元素整體在畫面所站面積為 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 指的是一個元素 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 架構才有渲染力啊...
本篇參考學習資源
小結
透過本次習作，加深瞭解盒模型的運作原理，希望透過更多實際練習來熟悉盒模型間如何相互影響，且在不同 CSS 設計下又會有什麼樣的變化，在學習的過程中也發現可以多觀摩其他網站的 Box model 設計方式，從中觀察是如何使用 margin、padding，以及如合建構一個元素的盒模型、如何管理、規劃元件與元件的關係。
Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻
分享至
成為作者繼續創作的動力吧！
學習如何學習 的其他內容
- HTML 習作｜常用於文本的元素：、<h1>、<span>、Text Formatting
- CSS 習作｜The display Property：辨識 block、inline、inline-block 三胞胎
你可能也想看
- 美股定期定額從國泰世華 CUBE App 輕鬆開始
- CSS在現代網站設計中扮演的關鍵角色
- CSS - margin、padding
- CSS-position
- Css Position功能誤解與Box Model應用
- 學習如何用 React & Redux | TypeScript | Tailwind CSS 來做一個繪圖App
- 【CSS必學屬性】box-sizing
- CSS grid 達成類似 table colspan, rowspan 排版
- css overflow-y: auto not working in iPad
發表回應
成為會員 後即可發表留言
© 2024 vocus All rights reserved.