边界（margin）：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

补白（padding）：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。

——CSS权威指南

何时应当使用 margin ？

• 需要在border外侧添加空白时。
• 空白处不需要背景（色）时。
• 上下相连的两个盒子之间的空白，需要相互抵消时（如 15px + 20px 的 margin，将得到 20px 的空白）。
• margin 是用来隔开元素与元素的间距
• margin用于布局分开元素使元素与元素互不相干。

何时应当时用 padding ？

• 需要在border内测添加空白时。
• 空白处需要背景（色）时。
• 上下相连的两个盒子之间的空白，希望等于两者之和时（如 15px + 20px 的 padding，将得到 35px 的空白）。
• padding 是用来隔开元素与内容的间隔。
• padding 用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

参考资料：