何时在CSS中使用margin和padding
在编写CSS时，应该在决定何时使用margin以及何时使用padding时使用特定的规则或准则？
TL; DR：默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且想要增加该可见框内的空间。
对我来说，填充和边距的最大区别在于， 垂直边距会自动缩小，填充不会。 考虑两个元素，每个填充1em。 该填充被认为是元素的一部分，并且始终保留。 因此，您将以第一个元素的内容结束，接着是第一个元素的填充，接着是第二个元素的填充，接着是第二个元素的填充。 因此，这两个元素的内容最终会相距2em。
现在用1em边距替换该填充。 边距被认为不在要素范围内，并且相邻项目的边距会重叠。 因此在这个例子中，你将会得到第一个元素的内容，后面跟着1em的组合边界，接着是第二个元素的内容。 所以这两个元素的内容仅相隔1em。
当你知道你想要在元素周围放置1em的空格时，无论它在哪个元素旁边，这都会非常有用。
另外两个很大的区别是填充包含在点击区域和背景颜色/图像中，但不包括边距。
边缘位于块元素的外部，而填充位于内部。
我所见过的最好的例子，图表，甚至是“自己试一试”的视图都在这里解释。
下图我认为可以立即直观地了解这种差异。
有一点需要注意的是符合标准的浏览器（IE怪癖是一个例外）只会将内容部分渲染到给定宽度，因此请在布局计算中记录这一点。 另外请注意，使用Bootstrap 3支持它时，边框将看起来有些复出。
链接地址: http://www.djcxy.com/p/769.html