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

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 中的要素來進行簡單的介紹:
  • 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下定決心開啟轉職工程師的新生活,相信不斷學習會有成長的一天。
|聯絡我:[email protected]
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
發表第一個留言支持創作者!