margin和padding的区别

在刚开始学习html的时候，我总分不清margin和padding他俩到底是指的哪一部分，现在通过一个例子总算弄清楚了他们两者的范围，简要跟大家说一下，不足之处多多批评指正哦！

做过网页的应该都见过这张图片，它已经很直白的给我们展示了margin和padding分属的区域，以中间那条实线为分界点，往外是margin作用的区域，往内是padding作用的区域。接下来通过一个实例再来看一下：

这是我设置的div块的属性，呈现结果如下图：

为了方便大家区分，我为div块设置了边框属性，红色边框就是div块的边界。

将鼠标放到第一个div块上，我们可以看到以红线为分界，里面绿色的为padding设置的20px，也就是文本内容与盒子边界的距离；外面橙色的为margin设置的20px，也就是第一个盒子与第二个盒子之间的距离。