CSS中的边距和填充有什么区别？在何种情况下：
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
从…起https://www.w3schools.com/css/css_boxmodel.asp
不同部分的说明：内容-框的内容，其中显示文本和图像填充-清除内容周围的区域。填充物是透明的边框-围绕填充和内容的边框边距-清除边界外的区域。边距是透明的
实时示例（通过更改值进行模拟）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
其他回答
从…起https://www.w3schools.com/css/css_boxmodel.asp
不同部分的说明：内容-框的内容，其中显示文本和图像填充-清除内容周围的区域。填充物是透明的边框-围绕填充和内容的边框边距-清除边界外的区域。边距是透明的
实时示例（通过更改值进行模拟）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
边距会清除元素周围的区域（边界外），但填充会清除元素内容周围（边界内）的区域。
这意味着您的元素不知道其外部边距，因此如果您正在开发动态web控件，我建议您尽可能使用填充与边距。
请注意，有时您必须使用保证金。
高级边距与填充说明
使用填充来分隔元素中的内容是不合适的；您必须在子元素上使用margin。较旧的浏览器（如Internet Explorer）误解了框模型，除非它使用了在Internet Explorer 4中完美工作的边距。
使用填充时有两个例外：
它应用于不能包含任何子元素（如输入元素）的内联元素。您正在补偿一个非常复杂的浏览器错误，供应商*咳嗽*Mozilla*咳嗽*拒绝修复该错误，并且确信（在一定程度上，您与W3C和WHATWG编辑保持定期交流）您必须有一个有效的解决方案，该解决方案不会影响除您正在补偿的错误之外的任何其他问题的样式。
当你有一个带有填充的100%宽度元素时：50px；您可以有效地获得width:calc（100%+100px）；。由于未将边距添加到宽度中，因此在子元素上使用边距而不是直接在元素上填充时，不会导致意外的布局问题。
因此，如果您不执行这两项操作之一，请不要向元素添加填充，而是向它的直接子/子元素添加填充以确保在所有浏览器中都能获得预期的行为。
边距位于块元素的外侧，而填充位于内侧。
使用边距将块与块外的东西分开使用填充将内容移离块的边缘。
这里有一些HTML演示了填充和边距如何影响可点击性和背景填充。一个对象会收到对其填充的点击，但对对象空白区域的点击会转到其父对象。
$（“.other”）.click（函数（e）{console.log（“外部”）；e.停止传播（）；});$（“.intern”）.click（函数（e）{console.log（“内部”）；e.停止传播（）；});.外部{填充：10px；背景：红色；}.内部{边距：10px；填充：10px；背景：蓝色；边框：纯白1px；}<script src=“http://code.jquery.com/jquery-latest.js“></script><div class=“outer”><div class=“inner”style=“位置：相对；高度：0px；宽度：0px”></div></div>
