【部落格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 的差別啦!
留言
張貼留言