HTML中padding和margin的區別和用法

　 margin(外邊距)

定義:margin是用來隔開元素與元素的間距，發生在元素自己的外部，margin用於佈局分開元素使元素與元素互不相干。

提示:margin: top right bottom left;(margin:10px 20px 30px 40px) 它的給值方式爲上，右，下，左。

建議什麼時候應當使用margin：
　　 須要在border外側添加空白時。
　 　空白處不須要背景（色）時。
　 　上下相連的兩個盒子之間的空白，須要相互抵消時。如15px + 20px的margin，將獲得20px的空白。

語法：

（1）margin-left:10px; 左外邊距
（2）margin-right:10px; 右外邊距
（3）margin-top:10px; 上外邊距
（4）margin-bottom:10px; 下外邊距
（5）margin:10px; 四邊統一外邊距
（6）margin:10px 20px; 上下、左右外邊距
（7）margin:10px 20px 30px; 上、左右、下外邊距
（8）margin:10px 20px 30px 40px; 上、右、下、左外邊距

 

margin在塊元素、內聯元素中的區別

　　

HTML裏分兩種基本元素，即block和inline。block元素另起一行開始，並獨佔一行。inline元素則同其餘inline元素共處一行。

在塊元素中：

所以，margin在塊級元素下，上下左右能夠隨意設定。且塊級元素的margin的參照基準是前一個元素即相對於自身以前的

元素有margin距離。若是元素是第一個元素，則就是相對於父元素的margin距離。

在內聯元素中：

　　margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，若是你要改變內聯元素的行高即相似文本的行間距，那

麼你只能使用這三個屬性：line-height，fong-size，vertical-align。請記住，這個影響內聯元素高度的是line-height而不是height。

 

padding(內邊距)

　　

定義:padding用於元素與內容之間的間隔，讓內容與元素之間有一段內邊距，放生在元素自己內部。

提示:padding: top right bottom left;(padding:10px 20px 30px 40px) 它的給值方式爲上，右，下，左。

建議什麼時候應當使用padding：
　　什麼時候應當時用padding：
　　須要在border內測添加空白時。
　　空白處須要背景（色）時。

語法：

　　（1）padding-left:10px; 左外邊距
　　（2）padding-right:10px; 右外邊距
　　（3）padding-top:10px; 上外邊距
　　（4）padding-bottom:10px; 下外邊距
　　（5）padding:10px; 四邊統一外邊距
　　（6）padding:10px 20px; 上下、左右外邊距
　　（7）padding:10px 20px 30px; 上、左右、下外邊距
　　（8）padding:10px 20px 30px 40px; 上、右、下、左外邊距

padding在塊元素、內聯元素中的區別

　　HTML裏分兩種基本元素，即block和inline。block元素另起一行開始，並獨佔一行。inline元素則同其餘inline元素共處一行。

在塊元素中：

　　所以，padding在塊級元素下，上下左右能夠隨意設定，會對元素內部發生改變。

在內聯元素中：

　　行內非替換元素上設置的內邊距不會影響行高計算；所以，若是一個元素既有內邊距又有背景，從視覺上看可能會延伸到其餘

行，有可能還會與其餘內容重疊。元素的背景會延伸穿過內邊距。不容許指定負邊距值，行內元素的padding元素，只有padding-

left和padding-right有效果，上下不識別；