CSS中的边距和填充有什么区别？在何种情况下：
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
对你的问题有更多的技术解释，但如果你想要一种方法来思考边距和填充，这个类比可能会有所帮助。
将块元素想象成挂在墙上的相框：
照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。
考虑到这一点，一个很好的经验法则是，当您希望将一个元素与墙上的其他元素隔开时，使用边距，当您调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充会使元素变大1。
1可以使用框大小属性更改此行为。
其他回答
对你的问题有更多的技术解释，但如果你想要一种方法来思考边距和填充，这个类比可能会有所帮助。
将块元素想象成挂在墙上的相框：
照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。
考虑到这一点，一个很好的经验法则是，当您希望将一个元素与墙上的其他元素隔开时，使用边距，当您调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充会使元素变大1。
1可以使用框大小属性更改此行为。
边距会清除元素周围的区域（边界外），但填充会清除元素内容周围（边界内）的区域。
这意味着您的元素不知道其外部边距，因此如果您正在开发动态web控件，我建议您尽可能使用填充与边距。
请注意，有时您必须使用保证金。
从…起https://www.w3schools.com/css/css_boxmodel.asp
不同部分的说明：内容-框的内容，其中显示文本和图像填充-清除内容周围的区域。填充物是透明的边框-围绕填充和内容的边框边距-清除边界外的区域。边距是透明的
实时示例（通过更改值进行模拟）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
我所见过的最好的例子、图表，甚至是“自己试试看”的观点都在这里。
我认为下面的图表可以立即直观地理解两者的区别。
需要记住的一点是，符合标准的浏览器（IE怪癖是一个例外）只将内容部分渲染为给定的宽度，因此在布局计算中要注意这一点。还要注意的是，随着Bootstrap 3的支持，border box有点卷土重来。
需要注意的一点是，当自动折叠的边距让你烦恼时（并且你没有在元素上使用背景色），使用填充更容易。
