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

今天要做的筆記:margin(外距)、padding(內距)

這兩個常常搞混,我在寫網頁表格的時候,常常覺得很頭痛。用下去效果不對,又要改另一個。

核心差異

margin(外距):元素外部的距離,控制「元素與元素之間」的間隔。

padding(內距):元素內部的距離,控制「內容與邊框之間」的空間。

特色與差異

  • margin: 不會延伸背景顏色、會推開其他元素、可能會重疊(collapse)
  • padding: 會延伸背景顏色、不會推開其他元素、不會重疊(collapse)

範例 1

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

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

範例 2(值反過來)

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

→ padding 的效果非常明顯,框與文字的距離變大,四個方向都生效。

連結測試頁面:昏貴 CSS 測試頁面

單方向設定

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

padding-top: 10px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 0px;
  

縮寫寫法(Shorthand)

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 完全相同。

範例 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>
  

程式碼結果看這邊:昏貴的 CSS 程式碼呈現結果

這樣就能清楚看出 margin 與 padding 的差別啦!

留言

這個網誌中的熱門文章

常見的化痰粉愛克痰(小鳥粉)怎麼吃?|化痰粉成人及小孩的使用劑量|紅色與藍色比較

麻將新手必看!不知道聽什麼牌怎麼辦?超多種實戰聽牌範例,教你怎麼判斷胡牌機會

麻將教學懶人包|從規則到牌理的完整觀念整理(附實戰心得)