怎樣區分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是盒模型的內邊距