CSS中的空白和填充之间到底有什么区别？它似乎并没有多大作用。您能否举一个例子说明差异所在（为什么知道差异很重要）？
边距和填充之间的区别？
第2476篇《边距和填充之间的区别？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共21个回答
填充是您的内容和边框之间的空间。凡为保证金之间的空间的边界和其他元素。
边距应用于元素的外部，因此影响元素与其他元素的距离。
填充应用于元素的内部，从而影响元素内容离边界的距离。
另外，使用边距不会影响元素的尺寸，而填充将使元素的尺寸（设置高度+填充）变大，例如，如果您有一个100x100px的div和5 px的填充，那么您的div实际上将为105x105px
我刚刚注意到的一件事，但以上答案均未提及。如果我有一个动态创建的DOM元素，该元素以空的内部html内容初始化，那么如果您不希望此空元素占用创建内容的空间，那么最好使用空白而不是填充的方式。
有一个重要区别：
边距-位于元素的外部，即，将在元素开始之后“应用”空格移位。填充-位于内部，另一个将在元素开始之前应用空格。
填充是网页上最接近的组件之间的空间，空白是距网页空白处的空间。
尝试将背景色放在具有宽度和高度的块div上。您会看到填充增加了元素的大小，而边距只是在文档流中移动了元素。
边距专门用于移动元素。
Margin是CSS中的属性，用于在边框之外的元素周围创建空间。程序员可以为顶部，右侧，底部和左侧设置边距。换句话说，他可以使用margin-top，margin-right，margin-bottom和margin-left来设置这些值。
该保证金值可以是以下类型的。
First, auto allows the browser to calculate the margin. Moreover, length denotes a margin in px, pt or cm, while % helps to describe a margin as a percentage relative to the width of the containing element. Finally, inherit denotes that the margin has to inherit from the parent element.
Padding is a property in CSS that helps to create space around an element inside the border. The programmer can set the padding for top, right, bottom and left. In other words, he can set those values using padding-top, padding-right, padding-bottom and padding-left.
The Padding values can be of the following types.
The length describes padding in px, pt or cm, while % denotes padding as a percentage relative to the width of the containing element. Finally, inherit describes that the padding should be inherited from the parent element.
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>Difference Between Margin and Padding
Margin is a CSS property that is used to create space around the element outside the defined border, while the padding is a CSS property that is used to create space around the element, inside the defined border. Thus, this explains the main difference between margin and padding.
Values Furthermore, the values of margin can be auto, length, % or inherit, whereas the values of padding can be length, % or inherit type. Hence, this is another difference between margin and padding.
简而言之，margin和padding是CSS中的两个属性，可用于设置网页样式。无法为这些属性分配负值。边距和填充之间的主要区别在于，边距有助于在边框外部的元素周围创建空间，而填充有助于在边框内部的元素周围创建空间。
填充使开发人员可以在文本及其封闭元素之间保持空间。边界是元素与父DOM的另一个元素保持的空间。
参见示例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
<title>Pseudo Elements</title>
<style type="text/css">
body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
.page
{
background-color: #fff;
padding: 10px 30px 50px 50px;
margin:30px 100px 30px 300px;
}
</style>
</head>
<body>
<div class="page">
Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text.
</div>
</body>
边距和填充实际上都是填充的类型。...一个（边距）位于元素边框的外部，以使其与其他元素保持距离，而另一个（边距）位于元素内容的外部，以使内容与元素边框保持距离。
答案中没有提到边距和填充之间的主要区别之一：可点击性和悬停检测
增加填充会增加元素的有效尺寸。有时我有一个很小的图标，我不想将其变大，但用户仍然需要与该图标进行交互。我增加了图标的填充，使其具有更大的点击和悬停尺寸。增加图标的边距不会有相同的效果。
有关此主题的另一个问题的答案给出了一个示例。
保证金是盒子外面的空间；填充是盒子内部的空间。用白色填充很难看到差异，但是使用彩色填充可以很好地看到差异。
很高兴知道margin和之间的差异padding。我所知：
- 边距是元素的外部空间，而填充是元素的内部空间。换句话说，空白是元素边界外部的空间，而填充是元素边界内部的空间。
-
您可以将
auto值设置为保证金。但是，不允许填充。看到这个。
注意：用于margin: auto将块元素水平居中于其父元素内部。另外，可以通过将margin设置为auto来在flexbox内部垂直或水平放置元素，也可以同时放置两者。看到这个。 - 保证金可以是任何浮点数，但填充不能为负。
-
对元素进行样式设置时，也会对填充进行样式设置。但没有保证金。边距获取父元素的样式。例如，当您将
background-color属性设置为黑色时，其内部空间（即填充）将为黑色，但其外部空间（即空白）将为黑色。
填充
填充是CSS属性，用于定义元素内容与其边框（如果有边框）之间的空间。如果元素周围有边框，则填充将为从该边框到出现在该边框中的元素内容提供空间。如果一个元素周围没有边框，则添加填充对该元素完全没有影响，因为没有边框可提供空格。
余量
Margin是一个CSS属性，用于定义元素外部与其下一个外部元素之间的空间。
边距影响同时具有或不具有边界的元素。如果元素具有边框，则空白定义从该边框到下一个外部元素的间隔。如果一个元素没有边框，则margin定义从元素内容到下一个外部元素的空间。
填充和边距之间的差异
因此，margin和padding之间的区别在于，尽管padding处理内部空间，margin处理外部空间到下一个外部元素。
最简单的防御是：padding是在容器元素的边界内给出的空间，而边距是在外部给出的空间。对于不是容器的元素，填充可能没有多大意义，但保证金的边际将有助于安排它。
填充是边界内的空间，而边距是边界外的空间。
padding是内容和之间的空间border，而是margin边界外的空间。这是我通过Google的快速搜索找到的图片，它说明了这一想法。
边距应用于元素的外部，因此影响元素与其他元素的距离。
填充应用于元素的内部，从而影响元素内容离边界的距离。
另外，使用边距不会影响元素的尺寸，而填充将使元素的尺寸（设置高度+填充）变大，例如，如果您有一个100x100px的div和5 px的填充，那么您的div实际上将为105x105px
请记住以下三点：
- 边距是控件周围的多余空间。
- 填充是控件内部的额外空间。
- 外部控件的填充是内部控件的边距。
演示图像：（其中红色框表示欲望控制）
答案中缺少的一件事：
顶部/底部边距是可折叠的。
因此，如果元素底部有20px的边距，而下一个元素顶部有30px的边距，则两个元素之间的边距将是30px，而不是50px。这不适用于左/右页边距或填充。
相似问题
问题类别
基本上，填充和边距之间的差异来自背景。填充将决定内容之间的间隔，而边距将决定元素的外部边缘！