Html - Padding 和 Margin 有什麼差異 What's different Padding and Margin ?

目的

在開發前端頁面時候，我們常常會遇到 Padding 或是 Merge，功能都是間距不是嗎？
為了能夠讓各位能夠理解這兩個屬性我們就來分析吧

分析表

Feature	Padding (內邊距)	Margin (外邊距)
功能	控制 內容 與 邊框 之間的距離	控制 元素 與 其他元素 之間的距離
位置	在邊框內部，包圍內容	在邊框外部，包圍整個元素
影響背景顏色	會繼承元素的背景顏色	不影響（完全透明）
是否改變元素尺寸	是，會讓元素變大	否，不會改變元素本身的尺寸
應用範例	加文字與邊框的間距，避免內容擁擠	增加元素之間的距離，讓佈局更整齊
CSS 語法範例	padding: 20px;	margin: 10px;
影響其他元素布局	不會影響周圍元素	會影響相鄰元素的距離

結論

Padding：對內間距

Margin：對外間距

歡迎轉載，請註明出處。