iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
4
Modern Web

金魚都能懂的CSS必學屬性系列 第 27

margin & padding - 金魚都能懂的CSS必學屬性

marginpadding 這兩個屬性應該是所有新手必學的兩大屬性,也是網頁入門必備的一項常識,marginpadding 分別控制物件的外部距離與內部距離,其可接受的值可由 1 個,至多到 4 個,撰寫方式如同下面這樣

margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;

margin 與 padding 可接受的值,較常見到的值大致上有以下幾種

  • px
  • %
  • em
  • ex
  • vw
  • vh

marginpadding 會影響到一個物件在網頁中佔據的空間,所以了解兩者在網頁中的尺寸計算原理,是非常重要的一件事,請各位金魚千萬要仔細了解喔。

1 個值到 4 個值有甚麼差別

margin 與 padding 可以設定 1 到 4個值,其原理跟「Border & outline- 金魚都能懂的CSS必學屬性」中的「單一屬性的四值設定法」寫很相似,簡單來說就是可以利用數值的順序與數量,來決定你要設定的方向,其值的數量與代表方向,就像下面這樣

margin

/*四個值,個別指定*/
margin: 上  右  下   左;

/*三個值,左右採用同一個值,上下則分開指定*/
margin: 上   [右左]    下;

/*二個值,【上下】採用同一值,【左右】採用同一值*/
margin: [上下]   [右左];

/*一個值,【上下左右】都使用相同的值*/
margin: [上右下左];

padding

/*四個值,個別指定*/
padding: 上  右  下   左;

/*三個值,左右採用同一個值,上下則分開指定*/
padding: 上   [右左]    下;

/*二個值,【上下】採用同一值,【左右】採用同一值*/
padding: [上下]   [右左];

/*一個值,【上下左右】都使用相同的值*/
padding: [上右下左];

簡單的來看,四個值的順序其實就是一個順時針的方向,所以非常好記憶 (這段話也應該有印象,對!就是直接複製 border 那篇的...被打)。

margin 的用途

margin 的作用,是設定一個物件與周圍物件之間的距離,或者說「自身周圍要擴張多少地盤」,常見的翻譯稱之為「外距」,用占地盤的觀念來看是最實際的,例如我今天有個物件的 CSS 設定如下

div{
	width: 200px;
	height: 200px;
	background-color: #666;
	margin: 10px;
}

這時我的物件寬高各 200px ,表示我的物件是一個 200px 寬,200px 高的灰色外觀,基本佔據的空間就是 200 x 200 像素了,接著可以看到 margin: 10px; 這表示我的物件還往外部四周佔了各 10px 的空間,這空間都算是這物件的,別人不可侵犯,而這空間如空氣一般的存在,就像是領空一樣,看不到但卻又實際存在那條界線,所以你對物件設定背景色時,margin 的空間範圍是不會有背景色的,在排版時 margin 所佔據的空間也必須計算進去,否則很容易出現跑版狀況,新手千萬要再三注意,而一個物件的尺寸是如何被計算出來的?這部分可以參考免費教學影片「金魚都能懂網頁設計入門 : 區塊尺寸計算」以及「金魚都能懂網頁設計入門 : 換個新盒子」來了解。

用 Auto 來做水平置中

設計網頁時經常可以見到水平居中的版面區塊,倘若不是使用 flex 的話,大多這樣的版面區塊多是使用 margin: auto; 來做水平居中的, auto 的用途,使用比較白話的說明就是「將剩餘的空間分配給具備這個值的位置」,所以倘若我有一個物件的 CSS 設定如下

div{
	width: 200px;
	height: 200px;
	background-color: #666;
	margin: 0px 0px 0px auto;
}

而父層空間又大於200px 的話,這個物件就會靠右側,因為「列的剩餘空間」被分配到了該物件的左側,物件就會靠右側了,那如果我們設定左右都是 auto 的話呢?像是下方原始碼這樣

div{
	width: 200px;
	height: 200px;
	background-color: #666;
	margin: 0px auto;
}

這樣「列的剩餘空間」就會被分配到物件的左邊跟右邊,所以「列的剩餘空間」會被平均分成兩等份,分別給予該物件的左側與右側,於是物件就水平居中啦!

使用百分比單位怎麼算

在設定 margin 時使用百分比為單位,算是 RWD 網頁可能會見到的狀況, margin 使用百分比時,由於百分比是相對單位,那就必須要了解百分比是依據誰來做計算的,實際上 margin 使用百分比為單位的時候,是依據父層的內容空間(Content box) 做為百分百,所以如果我對一個物件設定了 margin-left: 10%; 的話,那就表示 margin-left 將會是父層 width 屬性值的 10%,切記計算時千萬別算錯了喔。

Padding 的用途

padding 的用途是設定物件邊框(border) 內與資料之間的留白空間,常見的翻譯是稱之為「內距」,讓你的資料不致於貼著邊框線,在版面編排中,可說是經常用到的一個屬性,這邊需要特別了解的是 paddingwidth 之間的關係,此外也會牽扯到 box-sizing 這個屬性,而 box-sizing 將會在下一篇中提到,所以暫時我們先聚焦在 paddingwidth 兩個屬性即可。

Padding 預設會增加物件的可見尺寸

如標題所說的,一個物件的尺寸會因為有無添加 padding 而產生變化,實際上你對一個物件設定 width 屬性時,僅是針對該物件的「內容空間」設定寬度,這個內容空間我們姑且稱為「content box」,也就是內容的盒子,若你對該物件設定了 padding 之後,padding 的空間則是會添加到 width 之外,所以物件的尺寸就變成了 「width + padding 」(height 亦同),但由於 padding 是添加在 borderwidth 之間的空間,所以 padding 的空間是會顯示背景色彩的。

使用百分比很特別

padding 設定百分比這個單位時,不管是上或下或左或右,都是採用父層的內容空間(Content box) 的「寬」做為百分百,再次強調!!!不管「上下左右」,都是採用「父層的寬」做為百分百,這一點很多人都會覺得奇怪,但規範就是如此制定的,就照做吧!而這樣特別的地方,對於我們在製作 RWD 網頁時,設定一個等比例區塊就很有用了,等比例區塊有興趣的朋友,可參考 Amos 之前的「CSS專家密技3 - CSS Protips」這場直播,看看怎麼製作等比例區塊。

很常搭配 border

padding 由於本身特性的關係,所以我們經常會搭配 border 或 background-color 來使用,主要都是因為視覺設計的關係,這樣的設定在視覺上面有時候是較為美觀的,但一切還是要看視覺設計師的設計稿來決定就是了,請各位有個心理準備就好囉。

這兩個簡單的屬性,卻是眾多新手跑版的原因,看似簡單卻又細節不少,幾個小小的重點就請金魚們小心且注意了,金魚都能懂的 CSS 必學屬性,我們下篇見!


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
min-width & max-width - 金魚都能懂的CSS必學屬性
下一篇
Box-sizing - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言