在CSS中，边距和填充到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明区别在哪里(以及为什么知道区别很重要)吗?
当前回答
自我说明图像
L - Left, R- Right and T - Top, B - Bottom
其他回答
你可以看看这个链接，在那里你可以看到在CSS中padding和margin是如何工作的。 https://raw.githack.com/sushantbramhacharya/WebTechnology_LEC/main/margin/index.html
这里的答案中漏掉了一个关键的东西:
上下页边距是可折叠的。
所以如果你在一个元素的底部有一个20px的边距，在下一个元素的顶部有一个30px的边距，两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。
我刚刚注意到一件事，但上面的答案都没有提到。如果我有一个动态创建的DOM元素，它是用空的内部html内容初始化的，如果你不希望这个空元素占用任何空间，除了它的内容被创建之外，使用边框而不是填充是一个很好的实践。
我对边距和填充的理解来自于谷歌的开发人员工具，如图所示
简单来说，边距是指元素周围的空间，padding指元素和元素内内容之间的空间。 这两种方法都用来制造间隙，但方式不同。
使用Margin创建间隙:
在创建间隙时，边缘将相邻的元素推开
使用Padding创建间隙:
使用填充来创建间隙既可以增加元素的大小，也可以缩小其中的内容
为什么知道两者的区别很重要?
了解它们的区别是很重要的，这样你就可以知道什么时候使用它们，并适当地使用它们。
同样值得注意的是，在设计网站布局时，页边距和填充很方便，因为页边距指定了一个元素是向上还是向下，向左还是向右移动，而填充指定了一个元素在容器内的外观和位置。
自我说明图像
L - Left, R- Right and T - Top, B - Bottom
