TL; DR： 默认情况下，我在所有地方都使用空白，除非我有边框或背景并且想要增加该可见框内的空间。
对我而言，填充和边距之间的最大区别是垂直边距会自动折叠，而填充则不会。
考虑两个元素彼此重叠，填充为
1em。该填充被视为元素的一部分，并始终保留。
因此，您将获得第一个元素的内容，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。
因此，这两个元素的内容最终将
2em分开。
现在，以1em的边距替换该填充。边距被视为在元素的外部，并且相邻项目的边距将重叠。
因此，在此示例中，您将获得第一个元素的内容，然后
1em是合并边距，然后是第二个元素的内容。因此，这两个元素的内容是
1em分开的。
当您知道要说出
1em元素周围的间距时，不管该元素旁边是什么元素，这都非常有用。
其他两个主要区别是单击区域和背景颜色/图像中包含填充，但空白处不包含填充。
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }div.padding > div { padding-top: 20px; }div.margin > div { margin-top: 20px; }<h3>Default</h3><div > <div>A</div> <div>B</div> <div>C</div></div><h3>padding-top: 20px</h3><div > <div>A</div> <div>B</div> <div>C</div></div><h3>margin-top: 20px; </h3><div > <div>A</div> <div>B</div> <div>C</div></div>
