padding和margin的區別和做用及各類場合出現的bug

1、padding

 Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與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; 上、右、下、左內邊距

2、margin

  Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。

一、語法結構

（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; 上、右、下、左外邊距

 

3、margin和padding的區別用圖表示爲

 

　IE8下input[button | submit] 設置margin:auto沒法居中bug：

　　發生場合：ie8下，若是給像button這樣的標籤(如button input[type="button"] input[type="submit"])設置{ display: block; margin:0 auto; }若是不設置寬度的話沒法居中。

　　解決方法：能夠給爲input加上寬度。

IE8百分比padding垂直margin bug：

　　發生場合：當父元素設置了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設置了margin同樣。

　　解決方法：給父元素加一個overflow:hidden/auto。

IE6/7下margin與absolute元素重疊bug：

　　發生場合：雙欄自適應佈局中，左側元素absolute絕對定位，右側的margin撐開距離定位。在IE6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。

　　解決方法：把左側塊級元素更改成內聯元素，好比把div更換爲span。