怎樣區分margin和padding
來源:酷知科普網 1.43W
操作方法
(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是盒模型的內邊距