CSS中的边距和填充有什么区别？在何种情况下：
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
边距位于块元素的外侧，而填充位于内侧。
使用边距将块与块外的东西分开使用填充将内容移离块的边缘。
其他回答
我所见过的最好的例子、图表，甚至是“自己试试看”的观点都在这里。
我认为下面的图表可以立即直观地理解两者的区别。
需要记住的一点是，符合标准的浏览器（IE怪癖是一个例外）只将内容部分渲染为给定的宽度，因此在布局计算中要注意这一点。还要注意的是，随着Bootstrap 3的支持，border box有点卷土重来。
边缘
边距通常用于在元素本身及其周围之间创建空间。
例如，我在构建导航条时使用它，使其紧贴屏幕边缘，不会出现空白。
衬料
当我有一个元素在边框内时，我通常使用＜div＞或类似的东西，我想减小它的大小，但同时我想保持它周围其他元素之间的距离或边距。
简单地说，这是情境性的；这取决于你想做什么。
保证金与衬垫：
元素中使用边距来创建该元素和页面其他元素之间的距离。其中填充用于在元素的内容和边框之间创建距离。边距不是元素的一部分，而填充是元素的一。
请参阅下面从边距与填充-CSS财产中提取的图像
对你的问题有更多的技术解释，但如果你想要一种方法来思考边距和填充，这个类比可能会有所帮助。
将块元素想象成挂在墙上的相框：
照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。
考虑到这一点，一个很好的经验法则是，当您希望将一个元素与墙上的其他元素隔开时，使用边距，当您调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充会使元素变大1。
1可以使用框大小属性更改此行为。
边距在框外，填充在框内
