由于我对感官超载很敏感并且对太多的视觉细节感到困惑，我想将我的 CSS 功能调色板简化为一个可管理的工具包，但又不会真正牺牲太多的美学吸引力。鉴于此，我似乎在HTML 元素的边距和填充之间失去了平衡。
所以我打算完全停止使用边距来支持填充。对我来说，无论如何都不是视觉/HTML 专家（根据经验，我更像是后端程序员），这似乎是可行的，但是，我确信存在这种区别是有原因的。
在这篇文章中，我要求专家解释使用和不使用边距和填充的缺点，以及是否可以通过仅使用两者之一来完成合理优雅的设计。如果有人可以提交示例来说明可以用一个而不是另一个来完成的事情，那也很棒。
不，不是在各个方面。
边距和填充是两个完全不同的东西。填充将添加到对象宽度或高度的整体大小，而边距不会。
想象一下，您有一组向左浮动的链接。仅在链接上使用填充将导致锚元素非常大，很可能不是您想要的。而使用一点填充和边距来增加锚点之间的空间会更合适。
使用边距可确保某物与其他物相距甚远。
使用填充可确保某物的内容远离其自身的边缘。
如果您在页面上有一个盒子布局，并且您希望每个盒子之间有间距以及边框，那么仅使用填充是不够的，因此您还必须使用边距。
作为一般规则，在需要时使用每个。我知道你的意思是事情变得混乱，css但有一些方法可以简化事情。对于一个简单的站点，我之前已经完成了以下操作。
css
.leftMargin {margin-left: 10px;}
.rightMargin {margin-right: 10px;}
.topMargin {margin-top: 10px;}
.bottomMargin {margin-bottom: 10px;}
.leftPadding {padding-left: 10px;}
.rightPadding {padding-right: 10px;}
.topPadding {padding-top: 10px;}
.bottomPadding {padding-bottom: 10px;}
然后您可以轻松设置通用padding和margin规则，而无需太多麻烦。但是话又说回来，您可能会争辩说这会产生难以管理的html标记。
这确实是您必须自己解决的问题。需要考虑的事情是只使用margins会产生非常不良的影响！更重要的是折叠边距为什么这种 CSS 边距顶部样式不起作用？.
希望这有帮助。
好吧，我想说你不能避免使用保证金，而且它们有不同的用途。
应使用填充在元素的边缘和内容之间创建空间，而应使用边距来分隔元素。
如果您从不使用边框，那么可以说您可以取消其中的 1 个，但如果您有 2 个彼此相邻的 div，两者都有边框但您不希望它们接触，您打算如何将它们分开？可以定位它们，但通常边距是最好的方法。
还要考虑总元素宽度是宽度 + 填充，而您可能会争辩说边距大小在元素“外部”，尽管在技术上仍然是元素的一部分。
我有很多样式标记，并且同样使用填充和边距
为了向您展示这两个概念之间的区别，我可以做的最简单的例子就是这个。
请注意，这margin是border（红色）和周围环境padding之间的空间，而是内容（在示例中是文本）和border.
通常你需要同时使用它们。但是，在您根本不需要使用边框的少数情况下，您只需设置其中一个就可以很好地管理。
不，如果你想做复杂的设计，就不行
网页设计的圣杯使用边距和内边距的组合
尽管margin有时padding可以做类似的事情，但每个人的目的是不同的。
margin指一个元素的侧面相对于其他元素所需的空间padding指元素内容与其边框之间的空间当您一起使用时，可以实现具有边距和填充的功能。