浅析css中的padding和margin

padding和margin是前端开发者学习和工作当中，一定会涉及到的两个知识点，初学时总是将这两个搞混。
通过chrome开发工具我们能够看到这样一个盒模型图:

从这里我们不难看出：padding就是边框到内容直接的一个距离，margin就是边框外面的一个距离，该元素与别的元素之间会存在这样一个距离。即一个是内边距，一个是外边距。
对于CSS的padding属性和margin属性，MDN是这样描述的:

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。padding简写属性可以避免分别设置每个边的内边距
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。
margin的top和bottom属性对非替换内联元素无效，例如<span>和<code>。