你可以看看这个链接，在那里你可以看到在CSS中padding和margin是如何工作的。 https://raw.githack.com/sushantbramhacharya/WebTechnology_LEC/main/margin/index.html

了解边距和填充之间的区别是很好的。据我所知:

Margin is the outer space of an element, while padding is the inner space of an element. In other words, margin is the space outside of an element's border, while padding is the space inside of its border. You can set auto value to margin. However, it's not allowed for padding. See this. Note: Use margin: auto to center a block element inside its parent horizontally. Also, it's possible to center an element inside a flexbox vertically or horizontally or both, by setting margin to auto. See this. Margin can be any float number, but padding must not be negative. When you style an element, padding will be styled also; but not margin. Margin gets the parent element's style. For example, when you set the background-color property to black, its inner space (i.e. padding) will be black, but not its outer space (i.e. margin).

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

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

使用Margin创建间隙:

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

使用Padding创建间隙:

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

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

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

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

最简单的定义是; Padding是容器元素边界内的一个空格，margin是容器元素边界外的一个空格。 对于不是容器的元素，填充可能没有多大意义，但空白可以帮助排列它。

边框=元素边框外的空间。

Padding =元素(内部)从文本到边框的空格。

请看这里:http://jsfiddle.net/robx/GaMpq/

边距应用于元素的外部，从而影响元素与其他元素的距离。

填充应用于元素的内部，从而影响元素的内容距离边框的距离。

此外，使用边距不会影响元素的尺寸，而填充会使元素的尺寸(设置高度+填充)，例如，如果你有一个100x100px的div，填充5px，你的div实际上将是105x105px