Padding、Margin、Border 是什麼?網頁設計必學的 CSS 知識!

Padding、Margin、Border 是什麼?網頁設計必學的 CSS 知識!

在學習 自架網站 時,一定常常看見 Padding、Margin、Border 這三個 CSS 網頁設計用詞,你知道它們有什麼功用嗎?

如果有好好使用這三個元素的話,不僅能有效提升網站的質感與排版美觀程度,還能提升網站 UI / UX!更多 UI / UX 是什麼

今天我們將帶你認識 Padding、Margin、Border 這三者的差別,以及適合的使用時機,並教你如何設定,讓你的網站看起來更好看!

準備好就開始吧:)


CSS Box Model 是什麼?

CSS Box Model(圖片截自:W3Schools

在開始深入介紹 Padding、Margin、Border 前,我們可以先來了解 CSS Box Model 是什麼。

CSS Box Model 是網頁設計中一個非常基本且重要的概念,它顯示了網頁上每個元素所佔的空間。

CSS Box Model 裡包含了四個元素,Content、Padding、Margin、Border,每一個元素都將影響 CSS Box Model 的大小。

CSS Box Model 裡包含了四個元素,Content、Padding、Margin、Border

接下來將分別說明這四個內容的位置,以及它們之間不同的功能。

一、Content(內容)

CSS Box Model 裡的元素:Content(內容)

Content(內容)為區塊的主要內容,像是文字、圖片、影片等..。Content 的大小會依照文字內容的多寡、圖片的長寬大小來決定。

從上圖可看見,Content 位於 Box Model 的最內層,藍色部分都屬於 Content 內容區域。

二、Padding(內距)

CSS Box Model 裡的元素:Padding(內距)

Padding(內距)是元素內部的空間距離,從上圖可看見,Padding 位於 Content 和 Border 之間,可用來控制 Content 和 Border 兩者的距離,綠色區塊都屬於 Padding 的空間。

透過設定 Padding 數值,Content 就能與 Border 保持適當的空間,讓整體內容看起來不那麼擁擠,製造乾淨舒適的排版。

想要改變 Padding 數值,可調整 CSS 語法。在 CSS 語法中,除了直接使用 padding 設定統一數值外,還能分別設定上、下、左、右的內距,可依照需求設定不同的數值。

統一設定四邊內距 CSS 語法:

.box{ padding: 10px; }

上內距 CSS 語法:

.box{ padding-top: 10px; }

下內距 CSS 語法:

.box{ padding-bottom: 10px; }

左側內距 CSS 語法:

.box{ padding-left: 10px; }

右側內距 CSS 語法:

.box{ padding-right: 10px; }

至於有關數值大小的設定,則是可以依照正在設計的區塊,給它適合的數值即可。

三、Border(邊框)

CSS Box Model 裡的元素:Border(邊框)

Border 就是元素的邊框,位於 Padding 外側,淺黃色區塊代表 Border 的數值。

由於通常 Border 的數值不會設定太大(大概是 1 – 5 px 的細線條),主要用來畫出 Content+Padding 的元素邊界。

Border 可以設定多種樣式,像是虛線或實心線條,也可以自訂 Border 的顏色、粗細等..。

Border CSS 語法範例:

.box{ border: 1px solid #000000; }

四、Margin(外距)

CSS Box Model 裡的元素:Margin(外距)

Margin(外距)就是元素外部的空間距離,從上圖可見,Margin 位於 CSS Box Model 的最外層。

橘色區塊都是屬於 Margin 的空間範圍,可用來控制整個元素與其他外部元素之間的距離。

Margin 的調整方式和 Padding 類似,一樣可直接使用 margin 設定統一數值外,還能分別設定不同的上、下、左、右外距。

統一設定四邊外距 CSS 語法:

.box{ margin: 10px; }

上外距 CSS 語法:

.box{ margin-top: 10px; }

下外距 CSS 語法:

.box{ margin-bottom: 10px; }

左側外距 CSS 語法:

.box{ margin-left: 10px; }

右側外距 CSS 語法:

.box{ margin-right: 10px; }

透過設定不同的 Margin 數值,可以設計出更舒服的排版,不過也是要留意整體的協調性唷!


Padding 的使用時機

Padding 的使用時機

這章節我們將說明 Padding 的使用時機,只要巧妙的運用 Padding,就能製作出很棒的設計!

由於 Padding 可用來控制內容與外邊界的距離,因此可利用 Padding 製作留白設計,增加元素內部的空間,使內容與邊框之間有舒服的距離,同時也保有該區塊的背景顏色。

假設你在一個區塊內新增一串文字,但文字和區塊的邊界貼得太近,會讓整個內容變得不容易閱讀,這時就可以派出 Padding 來拯救你啦!

設定 Padding,讓文字和區塊邊界之間產生空間,提升美觀與易讀性

透過設定區塊 Padding,就能讓文字內容與區塊邊界之間產生空間,整體美觀性就會提升許多,文字也變得比較易讀。

同時,該區塊的背景色也會隨著空間延伸擴大範圍,用戶就能輕易分辨不同的區塊。

此外,Padding 也可以用來增加網站按鈕元素的觸控區域,提升使用者體驗。

設定 Padding,增加網站按鈕元素的觸控區域,提升使用者體驗

從上圖可明顯看出,同樣文字大小的按鈕,沒有設定 Padding 的話,所能點擊的範圍有限,若是使用行動裝置瀏覽的用戶,可能就會比較不方便點擊。

設定 Padding 後,按鈕主體範圍增大,用戶可點擊的範圍也變大,不論是使用電腦或手機瀏覽都能輕鬆、順利點擊按鈕,大大提升使用者體驗!


Margin 的使用時機

Margin 的使用時機

接下來,就來聊聊 Margin 的使用時機吧!Margin 雖然和 Padding 一樣都有增加空間距離的功能,但使用時機卻不太一樣唷!

Margin 主要用來調整元素與周圍其他元素之間的距離,製造留白的排版設計。與 Padding 不同,Margin 產生的空間並不會保有元素的背景色。

Margin 製造留白的排版設計。與 Padding 不同,Margin 產生的空間不會保有元素的背景

上圖可見,若在元素加上 Margin 外距的話,區塊的周邊就會出現空白顏色,變得有些奇怪。

因此,通常 Margin 會用在不影響背景色的狀況中。我們拿犬哥網站首頁做個例子。

Hero Section 內包含文字和影片輪播兩個子區塊,我們可以把文字和影片輪播區塊都設定 Margin,就能將這兩個區塊元素做出間隔,同時也不影響背景色(因為黃色背景色是在母元素身上)。

使用 Margin 間隔兩個不同的元素區塊

順便一提,在 CSS 語法中,Margin 還有讓內容水平置中的功能,只要將左右兩側的 Margin 設定為 auto,就能達到水平置中的效果。

不過這是比較早期的做法,現在幾乎都是採用 Flex 或 Grid 來對齊比較多:)


Border 的使用時機

Border 的使用時機

Border 的使用時機就比較單純一點,它的位置在 Padding 與 Margin 的中間,當你想區隔元素主體與外部其他元素時,可以加上 Border 邊框,輕易區分。

加入 Border 邊框,比較容易區分不同內容的元素

Border 常被用來製作卡片效果,可以用來區分同類型、不同內容的元素。

以犬哥網站做範例,有 4 個步驟介紹,犬哥在這邊使用了橘色的 Border 來區分每個步驟,這樣用戶就能輕易分辨閱讀 4 個不同的內容。

此外,犬哥還設定了圓角,Border 的四個角落就會有圓滑的圓角,整體設計看起來也比較柔和、容易親近。

犬哥網站使用橘色圓角 Border 邊框,讓不同內容的元素更易區分,設計感也更柔和親近

Border 可以設定為實心直線、虛線、設定圓角等多種樣式,也可以只設定單邊 Boder,透過多種玩法,創造有趣的設計。


Padding、Margin、Border 差別比較

總結來說,Padding、Margin、Border 三者都有各自重要的功能,都可以讓網頁設計更有質感。

以下整理成比較表供站長們參考:)

PaddingMarginBorder
位置位於元素內部位於元素最外部位於 Padding、Margin 之間
使用時機想增加元素內部空間時想增加元素與其他外部元素之間的空間時想要以線條區分元素與其他外部元素時
背景元素背景與空間一起延伸元素背景不會一起延伸本身可設定顏色樣式
可達成的變化可增加上下左右空間可增加上下左右空間可調整線條樣式、圓角等
Padding、Margin、Border 差別比較

這邊僅列出一些基本差異,你可以透過實際操作應用,就能更加深入了解它們的特性和用法唷!


如何設定 Padding 和 Margin?

如何設定 Padding 和 Margin?

相信很多站長都是使用 WordPress 架站,其中 DiviElementor 是受到許多人喜愛的編輯器,這邊就使用這兩款編輯器示範如何設定 Padding 和 Margin。

Divi 示範

首先我們先打開 Divi 編輯頁面,並選擇一個你想調整的元素。接著你可以在 Design 分頁中找到 Spacing,打開後就能看到 Padding 和 Margin 的調整區域囉!更多 Divi 教學

可在 Divi 編輯器 Design > Spacing 內,找到 Padding 和 Margin 的設定

如果你有上下或左右兩側數值要同步的需求,也只需要點選兩個數值中間的 Icons,就能開啟同步變化,這樣就不用設定兩次啦!

Padding 和 Margin 的上下、左右設定可同步調整

Elementor 示範

使用 Elementor 編輯器設定 Padding 和 Margin 也相當簡單,打開編輯器後,點選要調整的元素。更多 Elementor 教學

之後點選進階頁面,就可以看到「 邊界 」(Margin)、「 邊框間距 」(Padding)兩個設定。

可在 Elementor 編輯器進階內,找到「 邊界 」(Margin)、「 邊框間距 」(Padding)的設定

Elementor 編輯器一樣能一鍵同步上下左右的數值,不過和 Divi 不一樣的是,Elementor 只能一次同步上下左右四邊的數值,無法上下、左右分開,但還是很方便!

Elementor 編輯器可以一次同步調整上下左右四邊的 Padding、Margin 數值

好啦!以上就是今天的教學,希望能幫助你未來製作網頁設計時,可以利用 Padding、Margin、Border,製作舒服的排版設計唷:)


常見問題

Padding 和 Margin 有什麼差別?

Padding 內距是調整元素內部的空間距離,Margin 則是調整元素與其他外部元素之間的距離,兩者雖然很相似,但使用情境還是不太一樣,可參考內文說明:)

可以只設定一邊的 Padding、Margin 或 Border 嗎?

沒問題!你可以 Padding、Margin 或 Border 上下左右都可以分別設定不同的數值,讓你根據自身需求設計。

不會 CSS 語法,如何調整  Padding、Margin?

若你是使用 WordPress 架站的話,可以使用 Divi 和 Elementor 這兩款熱門的編輯器,不需有程式碼概念,只需簡單輸入數值就能調整,詳細可參考內文教學。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

幫你增加網路曝光,提高你的線上營收!

WordPress 高手架站課|一堂課讓你變架站高手!

資源二:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源三:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 流量研究室 – 犬哥網站(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

加入 FB 犬哥社團
加入 FB 犬哥社團(目前有超過 9000+ 團員)

另外這是送給剛起步經營自媒體的朋友們,不論是經營網站、各類社群等都適用,立即加入 Line 群 免費領取「 神級自媒體起號工具包 」。

如果你想學更多品牌設計、社群行銷知識,也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習,可關注 YouTube 頻道

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端