margin和padding的區別

margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。（外邊距）

padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。（內邊距）

1、語法結構

（1）padding-left:10px; /margin-left:10px;　　　　　　　  　　左內/外邊距

（2）padding-right:10px; /margin-right:10px; 　　　　　　　　右內/外邊距

（3）padding-top:10px; /margin-top:10px; 　　　　　　   　　上內/外邊距

（4）padding-bottom:10px; /margin-bottom:10px;           　　下內/外邊距

（5）padding：10px;/ margin:10px; 　　                       　　  四邊統一內/外邊距

（6）padding:10px 20px; /margin:10px 20px; 　　　　　　　　 上下、左右內/外邊距

（7）padding:10px 20px 30px;/margin:10px 20px 30px; 　　     上、左右、下內/外邊距

（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左內/外邊距

 

 關於padding：

 注意：將Padding設置為負值無效：

 

 在塊元素中：

 

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

 

 在內聯元素中：

 

　　行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他

 

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

 

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

 

 

 關於margin：

 margin：0 auto；  只對塊級元素起作用

 

 在塊元素中：

 

 因此，margin在塊級元素下，上下左右可以隨意設定。且塊級元素的margin的參照基准是前一個元素即相對於自身之前的

 

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

 

 在內聯元素中：

 

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

 

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