怎樣區分margin和padding

操作方法

（01）我們在進行網頁製作時都會遇到為元素設定邊距的情況，邊距又分為外邊距和內邊距，即margin和padding.

（02）檢視元素的margin和padding我們需要藉助Dreamweaver軟體和火狐瀏覽器中的firebug外掛。

（03）margin和padding是在html中的盒模型的基礎上出現的，margin是盒子的外邊距，即盒子與盒子之間的距離，而padding是內邊距，是盒子的邊與盒子內部元素的距離。

（04）我們使用firebug檢視html，當滑鼠點選到相應的程式碼時，網頁中的相應元素會變成藍色，緊挨著的紫色元素是padding，

（05）藍色部分旁邊的黃色部分是元素的margin值，在元素上方是margin-top，下方是margin-bottom,左邊margin-left,右邊margin-right。

（06）我們還可以藉助於firebug的“佈局”選項檢視各個元素的內外邊框。也就是上面幾張圖的來源，我們開啟一個網頁，按下f12，在firebug中檢視，然後滑鼠選定html中的某個元素，點選右側的佈局。

（07）這樣我們看到的一個方框，方框中註明了外邊距是多少，內邊距是多少。

特別提示

簡單總結概括一下就是margin是盒模型的外邊距，padding是盒模型的內邊距