怎样区分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是盒模型的内边距