【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 及元素主要內容:
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下定決心開啟轉職工程師的新生活,相信不斷學習會有成長的一天。
|聯絡我:vivian.enlife@gmail.com
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
明明想要某個欄位的寬高為 200px,卻發現自己不知道為什麼怎麼更改都會改不動,又或者寬高更改了,卻沒有辦法與其他元素並列。 上述的狀況,通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
明明想要某個欄位的寬高為 200px,卻發現自己不知道為什麼怎麼更改都會改不動,又或者寬高更改了,卻沒有辦法與其他元素並列。 上述的狀況,通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
在一個網頁上,會需要使用到圖片的地方有非常多處,像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這一章節中,我們介紹了 Flexbox 這個 CSS 模型及其用法,重點講解了 Flex 容器和項目的各種屬性。通過具體的示例,展示了如何使用 Flexbox 進行一維佈局設計,並且通過實踐案例,展示了多行 Flex 項目和不同對齊方式的應用。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
在學習 CSS 的過程中,Padding 與 Margin 是兩個經常出現的名詞,但對於初學者來說,可能會有些難以理解。因此,本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後,便能設計出更具層次或易讀的網頁。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這一章節中,我們介紹了 Flexbox 這個 CSS 模型及其用法,重點講解了 Flex 容器和項目的各種屬性。通過具體的示例,展示了如何使用 Flexbox 進行一維佈局設計,並且通過實踐案例,展示了多行 Flex 項目和不同對齊方式的應用。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
在學習 CSS 的過程中,Padding 與 Margin 是兩個經常出現的名詞,但對於初學者來說,可能會有些難以理解。因此,本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後,便能設計出更具層次或易讀的網頁。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
CSS Box Model 是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整,看以下圖片: 簡單來說margin就是一個是外邊距,與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔,可以設定為正數(增加與其他元素的距離)、負數(減少與其他
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
CSS 裡的「寬度,最大寬度,最小寬度」分別是什麼呢? ➊ width 用來設定元素的寬度,且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
Thumbnail
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。