这里的答案中漏掉了一个关键的东西:

上下页边距是可折叠的。

所以如果你在一个元素的底部有一个20px的边距，在下一个元素的顶部有一个30px的边距，两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。

我对边距和填充的理解来自于谷歌的开发人员工具，如图所示

简单来说，边距是指元素周围的空间，padding指元素和元素内内容之间的空间。 这两种方法都用来制造间隙，但方式不同。

使用Margin创建间隙:

在创建间隙时，边缘将相邻的元素推开

使用Padding创建间隙:

使用填充来创建间隙既可以增加元素的大小，也可以缩小其中的内容

为什么知道两者的区别很重要?

了解它们的区别是很重要的，这样你就可以知道什么时候使用它们，并适当地使用它们。

同样值得注意的是，在设计网站布局时，页边距和填充很方便，因为页边距指定了一个元素是向上还是向下，向左还是向右移动，而填充指定了一个元素在容器内的外观和位置。

我刚刚注意到一件事，但上面的答案都没有提到。如果我有一个动态创建的DOM元素，它是用空的内部html内容初始化的，如果你不希望这个空元素占用任何空间，除了它的内容被创建之外，使用边框而不是填充是一个很好的实践。

Margin是CSS中的一个属性，用于在元素周围、边框之外创建空格。程序员可以设置上、右、下和左的边距。换句话说，他可以使用margin-top, margin-right, margin-bottom和margin-left来设置这些值。

Margin值可以是以下类型。

首先，auto允许浏览器计算保证金。此外，length表示以px、pt或cm为单位的边距，而%则有助于将边距描述为相对于包含元素宽度的百分比。最后，inherit表示边缘必须从父元素继承。

Padding是CSS中的一个属性，用于帮助在边框内的元素周围创建空间。程序员可以设置上、右、下和左的填充。换句话说，他可以使用padding-top、padding-right、padding-bottom和padding-left来设置这些值。

填充值可以是以下类型。

length以px, pt或cm为单位描述填充，而%则以相对于包含元素宽度的百分比表示填充。最后，inherit表示填充应该继承自父元素。

div.special { width:200px; border-style: solid; border-width:thin; border-color:#000; margin:30px 20px 10px 25px; } div.special2 { width:200px; border-style: solid; border-width:thin; border-color:#000; padding:30px 20px 10px 25px; } <div class="special"> Hello its margin test </div> <div class="special2"> Hello its padding test </div>

边距和填充之间的区别

Margin是一个CSS属性，用于在已定义边框外的元素周围创建空间，而padding是一个CSS属性，用于在已定义边框内的元素周围创建空间。因此，这解释了边距和填充之间的主要区别。

值 此外，margin的值可以是auto、length、%或inherit，而padding的值可以是length、%或inherit type。因此，这是边距和填充之间的另一个区别。

简而言之，边距和填充是CSS中的两个属性，允许对网页进行样式化。不可能为这些属性赋负值。边距和填充之间的主要区别在于边距有助于在边框外的元素周围创建空间，而填充有助于在边框内的元素周围创建空间。

边距和填充都是填充的类型....一个(margin)在元素边框之外，使其与其他元素保持距离，另一个(padding)在元素内容之外，使内容与元素边框保持距离。

边距和填充之间的一个关键区别在任何答案中都没有提到:点击性和悬停检测

增加填充会增加元素的有效大小。有时我有一个很小的图标，我不想让它看起来更大，但用户仍然需要与该图标进行交互。我增加了图标的填充，让点击和悬停的足迹更大。增加图标的边距不会有同样的效果。

关于这个主题的另一个问题的回答给出了一个例子。