margin和padding用法区别

这篇博文应该算是用Margin还是用Padding的读书笔记。

首先，有时候两者在布局定位上能够实现同样的效果。
但是，还是有若干的区别。

作者主要讲的内容是：

• 因为margin存在垂直外边距合并的用法，而这个用法非常的灵活，所以，如果不熟悉的话，用padding更容易让新手上手。

这里举的例子是有关两个相邻的div，其中第二个div没有使用border属性,而且这个div的第一个子元素使用了margin-top方法，出现的结果是：没有和父元素边框挤出空白，却使得这个margin-top作用在了父div身上。这就是在父div未加border属性时 margin的垂直外边距出现的问题。

• 对于维护性而言，对父元素加padding好过于在父元素未加padding的情况下给子元素(尤其是第一子元素)加padding。因为对第一个子元素的css padding的操作是在子选择器中完成的，如果后期变更第一个子元素(如换类，)，而这个类里面没有加padding,那么就无法实现之前的效果，这时候就需要重新编码一遍。用父元素这个就好多了,易于维护。

总而言之，这个作者的观点是：感觉他还是更倾向于用padding

何时应当使用margin：
需要在border外侧添加空白时。 空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。 空白处需要背景（色）时。 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

剩下的时间再读读他写的相关的第二篇与margin相关的文档吧：
附上链接：
不要告诉我你懂margin