margin 和 padding 在 CSS 中到底有什么区别？它似乎真的没有多大用处。您能否举例说明差异所在（以及为什么了解差异很重要）？
【问题讨论】：
padding vs margin。我认为我们需要在搜索栏中添加箭头并使其变为绿色。
标签： css
padding 是内容和border 之间的空间，而margin 是边界外的空间。这是我通过 Google 快速搜索找到的一张图片，说明了这个想法。
【讨论】：
这里的答案中缺少的一个关键点：
顶部/底部边距是可折叠的。
因此，如果您在一个元素的底部有 20 像素的边距，而在下一个元素的顶部有 30 像素的边距，则两个元素之间的边距将是 30 像素而不是 50 像素。这不适用于左右边距或填充。
【讨论】：
边距应用于元素的外部，从而影响元素与其他元素的距离。
内边距应用于元素的内部，从而影响元素内容与边框的距离。
此外，使用边距不会影响元素的尺寸，而填充会使元素尺寸（设置高度 + 填充），例如，如果您有一个 100x100 像素的 div 和 5 像素的填充，那么您的 div 实际上是 105x105 像素
【讨论】：
auto 以外的任何值，则 afaik 填充不会更改元素的宽度。如果宽度为auto，则额外的填充将相应地增加填充元素的宽度（并且从两侧，如@2013Asker 所述）
最简单的定义是 ; padding 是在容器元素的边界内给定的空间，而在外部给出边距。 对于不是容器的元素，填充可能没有多大意义，但边距将有助于安排它。
【讨论】：
Padding 是 inside 边框的空格，而 Margin 是空格 outside 边框。
【讨论】：
填充
Padding 是一个 CSS 属性，用于定义元素内容与其边框（如果它有边框）之间的空间。如果元素周围有边框，则 padding 将为出现在该边框中的元素内容从该边框留出空间。如果一个元素周围没有边框，那么添加填充对该元素完全没有影响，因为没有边框可以提供空间。
保证金
Margin 是一个 CSS 属性，它定义了一个元素的外部到其下一个外部元素的空间。
边距影响有或没有边框的元素。如果一个元素有边框，margin 定义了从这个边框到下一个外部元素的空间。如果元素没有边框，则 margin 定义从元素内容到下一个外部元素的空间。
填充和边距的区别
所以margin和padding的区别在于，padding处理的是内部空间，margin处理的是外部空间到下一个外部元素。
【讨论】：
任何答案都没有提到边距和填充之间的主要区别之一：可点击性和悬停检测
增加内边距会增加元素的有效大小。有时我有一个小图标，我不想让它明显变大，但用户仍然需要与该图标进行交互。我增加了图标的填充，为点击和悬停提供更大的空间。增加图标的边距不会有同样的效果。
An answer给另一个关于这个话题的问题举了一个例子。
【讨论】：
很高兴了解margin 和padding 之间的区别。据我所知：
auto 值设置为边距。但是，它不允许用于填充。 See this。
margin: auto 将块元素在其父元素内水平居中。此外，可以通过将 margin 设置为 auto 来使 flexbox 中的元素垂直或水平或两者居中。 See this。
background-color 属性设置为黑色时，其内部空间（即填充）将为黑色，但其外部空间（即边距）不会。
【讨论】：
【讨论】：
Margin 是框外的空间； padding 是框内的空间。使用白色填充很难看出差异，但使用彩色填充可以很好地看到。
【讨论】：
边距和内边距实际上都是内边距的类型......一个（边距）位于元素边界之外，以使其与其他元素保持距离，另一个（内边距）位于元素内容之外，以使内容与元素边框。
【讨论】：
填充允许开发者在文本和它的封闭元素之间保持空间。边距是元素与父 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 是 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 来设置这些值。
Padding 值可以是以下类型。
长度以 px、pt 或 cm 为单位描述填充，而 % 表示填充相对于包含元素的宽度的百分比。最后，inherit 描述了 padding 应该从父元素继承。
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。因此，这是 margin 和 padding 之间的另一个区别。
简而言之，margin 和 padding 是 CSS 中允许设置网页样式的两个属性。不能为这些属性分配负值。边距和内边距的主要区别在于边距有助于在边框外的元素周围创建空间，而内边距有助于在边框内的元素周围创建空间。
【讨论】：
尝试在具有宽度和高度的块 div 上放置背景颜色。您会看到 padding 增加了元素的大小，而 margin 只是在文档流中移动它。
边距专门用于移动元素。
【讨论】：
Padding 是网页上最近组件之间的间距，而 margin 是网页边缘的间距。
【讨论】：
我对margin和padding的理解来自google的开发者工具，附图中
简单来说，margin 是元素周围的空间，而 padding 是指元素和元素内部内容之间的空间。 这两者都用于制造差距，但方式不同。
使用保证金制造差距：
在创建间隙边距时将相邻元素推开
使用 Padding 创建间隙：
使用填充来创建间隙要么增大元素的大小，要么缩小内部的内容
为什么知道区别很重要？
了解它们的区别很重要，这样您就可以知道何时使用它们并适当地使用它们。
同样值得注意的是，margin 和 padding 在设计网站布局时非常方便，因为 margin 指定元素是向上还是向下、向左或向右移动，而 padding 指定元素在其容器中的外观和位置。
【讨论】：
有一个重要的区别：
Margin- 位于元素的外部，即在元素开始“之后”应用空格移位。 Padding- 位于内部，另一个将在元素开始“之前”应用空格。
【讨论】：
边距应用于您元素的外部，因此会影响您的元素与其他元素的距离。
填充应用于元素的内部，从而影响元素的内容与边框的距离。
此外，使用边距不会影响元素的尺寸，而内边距会使元素尺寸（设置高度 + 内边距），例如，如果您有一个 100x100 像素的 div，内边距为 5 像素，那么您的 div 实际上是 105x105 像素
【讨论】：
基本上，内边距和边距的区别在于背景。填充将决定内容之间的空间，而边距决定元素的外边缘！
【讨论】：
我刚刚注意到的一件事，但没有提到上述答案。如果我有一个动态创建的 DOM 元素，它使用空的内部 html 内容进行初始化，如果您不希望这个空元素占用除创建其内容之外的任何空间，那么使用边距而不是填充是一个好习惯。
【讨论】：
填充是您的内容和边框之间的空间。其中 Margin 是 边框和其他元素之间的空间。
【讨论】：