margin 與 padding 這兩個屬性應該是所有新手必學的兩大屬性，也是網頁入門必備的一項常識，margin 與 padding 分別控制物件的外部距離與內部距離，其可接受的值可由 1 個，至多到 4 個，撰寫方式如同下面這樣
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
margin 與 padding 可接受的值，較常見到的值大致上有以下幾種
margin 與 padding 會影響到一個物件在網頁中佔據的空間，所以了解兩者在網頁中的尺寸計算原理，是非常重要的一件事，請各位金魚千萬要仔細了解喔。
margin 與 padding 可以設定 1 到 4個值，其原理跟「Border & outline- 金魚都能懂的CSS必學屬性」中的「單一屬性的四值設定法」寫很相似，簡單來說就是可以利用數值的順序與數量，來決定你要設定的方向，其值的數量與代表方向，就像下面這樣
margin
/*四個值，個別指定*/
margin: 上 右 下 左;
/*三個值，左右採用同一個值，上下則分開指定*/
margin: 上 [右左] 下;
/*二個值，【上下】採用同一值，【左右】採用同一值*/
margin: [上下] [右左];
/*一個值，【上下左右】都使用相同的值*/
margin: [上右下左];
padding
/*四個值，個別指定*/
padding: 上 右 下 左;
/*三個值，左右採用同一個值，上下則分開指定*/
padding: 上 [右左] 下;
/*二個值，【上下】採用同一值，【左右】採用同一值*/
padding: [上下] [右左];
/*一個值，【上下左右】都使用相同的值*/
padding: [上右下左];
簡單的來看，四個值的順序其實就是一個順時針的方向，所以非常好記憶 (這段話也應該有印象，對！就是直接複製 border 那篇的...被打)。
margin 的作用，是設定一個物件與周圍物件之間的距離，或者說「自身周圍要擴張多少地盤」，常見的翻譯稱之為「外距」，用占地盤的觀念來看是最實際的，例如我今天有個物件的 CSS 設定如下
div{
width: 200px;
height: 200px;
background-color: #666;
margin: 10px;
}
這時我的物件寬高各 200px ，表示我的物件是一個 200px 寬，200px 高的灰色外觀，基本佔據的空間就是 200 x 200 像素了，接著可以看到 margin: 10px; 這表示我的物件還往外部四周佔了各 10px 的空間，這空間都算是這物件的，別人不可侵犯，而這空間如空氣一般的存在，就像是領空一樣，看不到但卻又實際存在那條界線，所以你對物件設定背景色時，margin 的空間範圍是不會有背景色的，在排版時 margin 所佔據的空間也必須計算進去，否則很容易出現跑版狀況，新手千萬要再三注意，而一個物件的尺寸是如何被計算出來的？這部分可以參考免費教學影片「金魚都能懂網頁設計入門 : 區塊尺寸計算」以及「金魚都能懂網頁設計入門 : 換個新盒子」來了解。
設計網頁時經常可以見到水平居中的版面區塊，倘若不是使用 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 的用途是設定物件邊框(border) 內與資料之間的留白空間，常見的翻譯是稱之為「內距」，讓你的資料不致於貼著邊框線，在版面編排中，可說是經常用到的一個屬性，這邊需要特別了解的是 padding 與 width 之間的關係，此外也會牽扯到 box-sizing 這個屬性，而 box-sizing 將會在下一篇中提到，所以暫時我們先聚焦在 padding 與 width 兩個屬性即可。
如標題所說的，一個物件的尺寸會因為有無添加 padding 而產生變化，實際上你對一個物件設定 width 屬性時，僅是針對該物件的「內容空間」設定寬度，這個內容空間我們姑且稱為「content box」，也就是內容的盒子，若你對該物件設定了 padding 之後，padding 的空間則是會添加到 width 之外，所以物件的尺寸就變成了 「width + padding 」(height 亦同)，但由於 padding 是添加在 border 與 width 之間的空間，所以 padding 的空間是會顯示背景色彩的。
對 padding 設定百分比這個單位時，不管是上或下或左或右，都是採用父層的內容空間(Content box) 的「寬」做為百分百，再次強調！！！不管「上下左右」，都是採用「父層的寬」做為百分百，這一點很多人都會覺得奇怪，但規範就是如此制定的，就照做吧！而這樣特別的地方，對於我們在製作 RWD 網頁時，設定一個等比例區塊就很有用了，等比例區塊有興趣的朋友，可參考 Amos 之前的「CSS專家密技3 - CSS Protips」這場直播，看看怎麼製作等比例區塊。
padding 由於本身特性的關係，所以我們經常會搭配 border 或 background-color 來使用，主要都是因為視覺設計的關係，這樣的設定在視覺上面有時候是較為美觀的，但一切還是要看視覺設計師的設計稿來決定就是了，請各位有個心理準備就好囉。
這兩個簡單的屬性，卻是眾多新手跑版的原因，看似簡單卻又細節不少，幾個小小的重點就請金魚們小心且注意了，金魚都能懂的 CSS 必學屬性，我們下篇見！
「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
iThome鐵人賽
看影片追技術