【部落格CSS】margin以及padding的效果差異以及定義方式比較，該如何區分內距

這篇整理 CSS 中很容易混淆的兩個屬性：margin 與 padding。簡單來說，margin 是元素外面的距離，padding 是元素裡面的距離。

📘 CSS margin 與 padding：外距、內距教學筆記

今天要整理的筆記是 margin 和 padding。

這兩個屬性很常在寫網頁排版時用到，但也很容易搞混。尤其是在寫表格、卡片、區塊排版時，常常會發現：「咦？我明明加了距離，為什麼畫面不是我想的那樣？」

其實只要抓住一個核心觀念，就會清楚很多：

margin 控制元素外部距離；padding 控制元素內部距離。

🧭 核心差異：margin 是外距，padding 是內距

先用最簡單的方式區分。

屬性	中文名稱	控制範圍	簡單理解
margin	外距	元素外部的距離。	控制元素與元素之間的間隔。
padding	內距	元素內部的距離。	控制內容與邊框之間的空間。

如果把一個 HTML 元素想像成一個盒子：

• 內容：盒子裡的文字或圖片。
• padding：內容與盒子邊框之間的空間。
• border：盒子的邊框。
• margin：盒子與其他盒子之間的距離。

外部元素 margin border padding content 內容

📦 margin 與 padding 的特色差異

兩者除了位置不同，對背景顏色、元素間距與重疊現象也有不同影響。

比較項目	margin	padding
中文名稱	外距	內距
位置	邊框外面。	邊框裡面。
用途	推開其他元素。	讓內容不要貼邊。
背景顏色	不會延伸到 margin。	會延伸到 padding。
是否可能重疊	垂直方向可能發生 margin collapse。	不會 collapse。

margin 比較像「把盒子往外推開」。
padding 比較像「把盒子裡面的內容往內縮」。

🧪 範例 1：margin 20px、padding 10px

先看第一個範例。這個方框外面有 20px 的外距，裡面有 10px 的內距。

<div style=" border: 2px solid #000; background-color: lightyellow; margin: 20px; padding: 10px; "> 這是一個有 margin 和 padding 的方框 </div>

這段程式碼的效果：

• margin: 20px：盒子外部留 20px 空白，把它與其他元素推開。
• padding: 10px：文字與邊框之間有 10px 空間，內容不會太貼邊。

測試頁面可以看這裡： 昏貴 CSS 測試頁面

🔁 範例 2：把 margin 和 padding 的值反過來

接著把數值反過來，改成 margin: 10px、padding: 20px。

<div style=" border: 2px solid #000; background-color: lightyellow; margin: 10px; padding: 20px; "> 這是一個有 margin 和 padding 的方框 </div>

這時候 padding 的效果會非常明顯，因為文字和邊框之間的距離變大，四個方向都會生效。

如果你看到「文字離邊框太近」，通常要調整的是 padding。
如果你看到「兩個區塊靠太近」，通常要調整的是 margin。

🎯 單方向設定

margin 和 padding 都可以針對單一方向設定。

margin 單方向設定

margin-top: 10px; /* 上外距 */ margin-right: 5px; /* 右外距 */ margin-bottom: 15px; /* 下外距 */ margin-left: 0px; /* 左外距 */

padding 單方向設定

padding-top: 10px; /* 上內距 */ padding-right: 5px; /* 右內距 */ padding-bottom: 15px; /* 下內距 */ padding-left: 0px; /* 左內距 */

單方向設定很適合用在只想調整某一邊距離的情境，例如只想讓標題下方多一點空白。

🧩 縮寫寫法：Shorthand

為了讓 CSS 寫起來更簡潔，margin 和 padding 都支援縮寫寫法。

margin 縮寫寫法

margin: 10px; /* 四邊都 10px */ margin: 10px 5px; /* 上下 10px、左右 5px */ margin: 10px 5px 20px; /* 上 10px、左右 5px、下 20px */ margin: 10px 5px 20px 15px; /* 上 10px、右 5px、下 20px、左 15px（順時針） */

padding 的縮寫規則與 margin 完全相同。

padding 縮寫寫法

padding: 10px; /* 四邊都 10px */ padding: 10px 5px; /* 上下 10px、左右 5px */ padding: 10px 5px 20px; /* 上 10px、左右 5px、下 20px */ padding: 10px 5px 20px 15px; /* 上 10px、右 5px、下 20px、左 15px（順時針） */

四個值的順序可以記成「上、右、下、左」，也就是順時針方向。

🃏 範例 3：卡片樣式

下面是一個常見的卡片樣式。這種寫法很適合用在文章摘要、商品卡片、資訊區塊。

<div style=" background: white; border-radius: 8px; border: 1px solid rgb(217,227,234); box-shadow: rgba(0,0,0,0.1) 0px 2px 4px; margin: 16px 0px; padding: 12px 16px; "> <h3 style="margin-top:0;">卡片標題</h3> <p>這裡是卡片內容，padding 讓文字不會貼邊，margin 讓卡片之間有空間。</p> </div>

這段卡片樣式中：

• margin: 16px 0px：上下外距 16px，左右外距 0px，讓卡片與卡片之間有距離。
• padding: 12px 16px：上下內距 12px，左右內距 16px，讓文字不會貼著卡片邊框。
• border-radius: 8px：讓卡片邊角變圓。
• box-shadow：讓卡片有陰影，看起來有一點浮起來的效果。

程式碼呈現結果可以看這裡： 昏貴的 CSS 程式碼呈現結果

📋 margin 與 padding 速查表

最後用表格快速整理本文重點。

問題	使用屬性	原因
兩個區塊太靠近	margin	需要調整元素外部距離。
文字太貼邊框	padding	需要調整內容與邊框的距離。
想讓卡片之間有空白	margin	卡片與卡片是不同元素。
想讓卡片內容更舒服	padding	內容需要離邊框遠一點。
想只調整上方距離	margin-top 或 padding-top	依照要調整外部或內部距離決定。

✅ 小結

margin 和 padding 是 CSS 排版中非常重要的概念。

• margin：外距，控制元素與元素之間的距離。
• padding：內距，控制內容與邊框之間的距離。
• margin 不會延伸背景色：因為它在元素外面。
• padding 會延伸背景色：因為它屬於元素內部空間。
• margin 可能發生 collapse：尤其是上下方向的外距。
• padding 不會 collapse：內距不會互相重疊。
• 縮寫順序：上、右、下、左，順時針方向。

margin → 元素外面的距離 → 推開別人 padding → 元素裡面的距離 → 撐開自己

最後用一句話記住：
margin 是盒子外面的空氣；padding 是盒子裡面的軟墊。