何时在 CSS 中使用 margin 和 padding
答案
边距位于块元素的外侧，而填充位于内部。
- 使用 margin 将块与其外部的东西分开
- 使用填充将内容移离块的边缘。
TL; DR： 默认情况下，我在任何地方使用边距，除非我有边框或背景并且想要增加可见框内的空间。
对我来说，填充和边距之间的最大区别是垂直边距自动折叠，而填充不会。考虑两个元素，一个在另一个之上，每个元素的填充为 1em。此填充被视为元素的一部分，并始终保留。因此，您将得到第一个元素的内容，然后是第一个元素的填充，接着是第二个元素的填充，接着是第二个元素的内容。因此，这两个元素的内容最终将相差 2em。
现在用 1em 边距替换该填充。边距被认为是在元素之外，并且相邻项目的边距将重叠。因此，在此示例中，您将得到第一个元素的内容，后跟 1em 的组合边距，后跟第二个元素的内容。所以两个元素的内容相差仅 1em。
当你知道你想要在元素周围说 1em 的间距时，这可能非常有用，无论它在哪个元素旁边。
另外两个很大的区别是填充包含在点击区域和背景颜色 / 图像中，但不包括边距。
我见过的最好的例子，图表，甚至是 “自己尝试” 的视图都在这里 。
我认为下面的图表可以立即直观地了解差异。
要记住的一件事是符合标准的浏览器（ IE 怪癖是一个例外 ）只将内容部分渲染到给定的宽度，因此在布局计算中要跟踪这一点。另请注意，边框有点像Bootstrap 3支持它。