使用margin还是padding

在正文开始之前我们先看一下一些比较权威的解释

CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

为了便于理解，我们其实可以把外边距成为空白，把内边距称为留白。他们各自在什么时候使用呢？

需要使用margin时

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

需要使用padding时

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

个人认为，margin用来创造元素与元素之间的空间，paddin用来创造元素与其中的内容之间的空间。

对于第二个盒子中的第一个元素，我们可以在其上方设置margin-top，也可以对第二个盒子设置padding-top。那么什么样的方案是最好的呢？我们思考下这个元素和这个盒子的关系，我们想让这个盒子内的内容与盒子有一定距离，当然是使用内边距最好了。所以这就是从原则出发来考虑使用的边距。

其实如果对元素使用margin-top的话还有可能会引起垂直外边距合并的问题。所以设置内边距是一个不错的选择。