高级边距与填充说明

使用填充来分隔元素中的内容是不合适的；您必须在子元素上使用margin。较旧的浏览器（如Internet Explorer）误解了框模型，除非它使用了在Internet Explorer 4中完美工作的边距。

使用填充时有两个例外：

它应用于不能包含任何子元素（如输入元素）的内联元素。您正在补偿一个非常复杂的浏览器错误，供应商*咳嗽*Mozilla*咳嗽*拒绝修复该错误，并且确信（在一定程度上，您与W3C和WHATWG编辑保持定期交流）您必须有一个有效的解决方案，该解决方案不会影响除您正在补偿的错误之外的任何其他问题的样式。

当你有一个带有填充的100%宽度元素时：50px；您可以有效地获得width:calc（100%+100px）；。由于未将边距添加到宽度中，因此在子元素上使用边距而不是直接在元素上填充时，不会导致意外的布局问题。

因此，如果您不执行这两项操作之一，请不要向元素添加填充，而是向它的直接子/子元素添加填充以确保在所有浏览器中都能获得预期的行为。

TL；DR：默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且希望增加可见框内的空间。

对我来说，填充和边距之间的最大区别是垂直边距会自动折叠，而填充不会。

考虑两个元素，一个在另一个之上，每个元素的填充为1米。此填充被视为元素的一部分，并始终保留。

因此，您将以第一个元素的内容结尾，然后是第一个元素填充，然后是第二个元素的填充，最后是第二元素的内容。

因此，这两种元素的含量最终将相距2米。

现在用1毫米的边距替换填充。边距被认为在元素之外，相邻项目的边距将重叠。

因此，在本例中，您将得到第一个元素的内容，然后是1em的组合边距，然后是第二个元素的属性。因此，这两种元素的含量仅相差1米。

当你知道你想说一个元素周围有1em的间距，而不管它旁边是什么元素时，这会非常有用。

另外两个大的区别是，填充包括在点击区域和背景色/图像中，但不包括边距。

div.box>div{height:50px；width:50px，border:1px纯黑；text-align:center；}div.padding>div｛padding-top:20px；｝div.margin>div｛margin-top:20px；｝<h3>默认值</h3><div class=“box”><div>A</div><div>B</div><div>C</div></div><h3>顶部填充：20px</h3><div class=“box padding”><div>A</div><div>B</div><div>C</div></div><h3>页边空白：20px</h3><div class=“box margin”><div>A</div><div>B</div><div>C</div></div>

了解边距和填充之间的区别很好。以下是一些区别：

边距是元素的外部空间，而填充是元素的内部空间。边距是元素边界外的空间，而填充是元素边界内的空间。Margin接受auto:bmargin:auto的值，但不能将padding设置为auto。提示：您可以使用此技巧使元素在其父对象内部居中（甚至垂直）。例如，请参见我的另一个答案。边距可以设置为任何数字，但填充必须为非负数。设置元素样式时，填充也会受到影响（例如背景色），但不会影响边距。

从…起https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明：内容-框的内容，其中显示文本和图像填充-清除内容周围的区域。填充物是透明的边框-围绕填充和内容的边框边距-清除边界外的区域。边距是透明的

实时示例（通过更改值进行模拟）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

我所见过的最好的例子、图表，甚至是“自己试试看”的观点都在这里。

我认为下面的图表可以立即直观地理解两者的区别。

需要记住的一点是，符合标准的浏览器（IE怪癖是一个例外）只将内容部分渲染为给定的宽度，因此在布局计算中要注意这一点。还要注意的是，随着Bootstrap 3的支持，border box有点卷土重来。

我总是使用这个原则：

这是Firefox中inspect元素特性的方框模型。它像洋葱一样工作：

你的内容在在中间。填充是指内容和标签边缘之间的空间在…内边界及其规格边距是标记周围的空格。

因此，更大的边距将在包含内容的框周围腾出更多空间。

较大的填充将增加内容和其所在的框之间的空间。

如果将框设置为特定值，则它们都不会增加或减小框的大小。