CSS中的边距和填充有什么区别？

边距位于块元素的外侧，而填充位于内侧。

• 使用边距将块与其外部的事物分开
• 使用填充将内容从块的边缘移开。

需要注意的一件事是，当自动折叠边距惹恼您时（并且您没有在元素上使用背景颜色），使用填充会更容易。

关于边距的问题是，您无需担心元素的宽度。

就像当你给一些东西时，你必须将元素的宽度减少 20px 以保持“适合”，并且不会打扰它周围的其他元素。{padding: 10px;}

因此，我通常首先使用填充来获取所有内容，然后使用边距进行细微调整。packed

另一件需要注意的事情是，填充在不同的浏览器上更加一致，IE不能很好地处理负边距。

以下是一些 HTML，演示了如何影响可点击性和背景填充。对象接收到其填充的单击，但单击对象边距区域会转到其父项。paddingmargin

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

我见过的最好的用例子、图表，甚至“自己试一试”的观点来解释这一点。

我认为下图可以立即直观地了解差异。

要记住的一件事是，符合标准的浏览器（IE 怪癖是一个例外）仅将内容部分呈现为给定的宽度，因此在布局计算中要跟踪这一点。另请注意，在 Bootstrap 3 的支持下，边框框在某种程度上卷土重来。

填充和边距之间最大的区别是垂直边距会自动折叠，而填充则不会。

考虑两个元素，一个在另一个之上，每个元素的填充为 。此填充被视为元素的一部分，并始终保留。1em

您将最终获得第一个元素的内容，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。

因此，这两个元素的内容最终将分开。2em

现在将该填充替换为边距。边距被视为在元素之外，相邻项的边距将重叠。1em

在第二个示例中，您将得到第一个元素的内容，后跟组合边距，然后是第二个元素的内容。所以这两个元素的内容只是分开的。1em1em

当您知道要说元素周围的间距时，无论它旁边是什么元素，这都非常有用。1em

另一个很大的区别是，填充包含在点击区域和背景颜色/图像中，但边距不包括。

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

默认情况下，我在任何地方都使用边距，除非我有边框或背景并希望增加该可见框内的空间。

边距与填充：

1. 边距在元素中用于在该元素与页面的其他元素之间创建距离。其中填充用于在元素的内容和边框之间创建距离。

2. 边距不是元素的一部分，而填充是元素的一部分。

请参考以下从边距与填充 - CSS 属性中提取的图像

你的问题有更多的技术解释，但如果你想要一种方法来考虑边距和填充，这个类比可能会有所帮助。

将块元素想象成挂在墙上的相框：

• 照片就是内容。
• 垫子就是填充物。
• 框架造型是边界。
• 墙就是视口。
• 两个帧之间的间距是边距。

考虑到这一点，一个好的经验法则是，当您想要将一个元素与墙上的其他元素间隔开来时，使用边距，并在调整元素本身的外观时使用填充。边距不会改变元素的大小，但填充会使元素变大¹.

¹ 您可以使用 box-sizing 属性更改此行为。

边距清除元素周围的区域（边框外），而填充清除元素内容周围的区域（边框内）。

这意味着您的元素不知道其外部边距，因此，如果您正在开发动态 Web 控件，我建议尽可能使用填充与边距。

请注意，有时您必须使用保证金。

高级边距与填充解释

不宜用于将元素中的内容间隔开来;您必须改用 on the child 元素。较旧的浏览器（如 Internet Explorer）误解了盒子模型，除非在 Internet Explorer 4 中完美运行。paddingmarginmargin

使用时有两种例外情况：padding

1. 它应用于不能包含任何子元素（如输入元素）的内联元素。

2. 您正在补偿一个高度杂乱的浏览器错误，供应商*咳嗽* Mozilla *咳嗽* 拒绝修复，并且确定（在某种程度上，您与 W3C 和 WHATWG 编辑定期交流）您必须有一个有效的解决方案，并且该解决方案不会影响您正在补偿的错误以外的任何内容的样式。

当你有一个 100% 的宽度元素时，你有效地得到了 .由于没有添加到元素中，因此当您使用 on 而不是直接在元素上使用时，它不会导致意外的布局问题。padding: 50px;width: calc(100% + 100px);marginwidthmarginchild elementspadding

因此，如果您不执行这两件事之一，请不要向元素添加填充，而是向其直接子元素添加填充，以确保您将在所有浏览器中获得预期的行为。

很高兴知道 和 之间的区别。以下是一些区别：marginpadding

• 边距是元素的外部空间，而填充是元素的内部空间。

• 边距是元素边框外的空间，而填充是元素边框内的空间。

• Margin 接受 auto： 的值，但不能将 padding 设置为 auto。margin: auto

  提示：您可以使用该技巧使元素在其父级内居中（甚至垂直）。例如，请参阅我的其他答案。

• 边距可以设置为任意数字，但填充必须为非负数。

• 当您设置元素样式时，填充也会受到影响（例如背景颜色），但边距不会受到影响。

从 https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明：

• 内容 - 显示文本和图像的框的内容

• 填充 - 清除内容周围的区域。填充是透明的

• 边框 - 围绕填充和内容的边框

• 边距 - 清除边界外的区域。边距是透明的

实时示例（通过更改值进行操作）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

首先，让我们看看有什么区别，每个职责是什么：

1） 边距 CSS 边距

属性用于在元素周围生成空间。
margin 属性设置 边境。使用 CSS，您可以完全控制边距。
有 用于设置元素每侧边距的 CSS 属性 （上、右、下和左）。

2） 填充

CSS 填充属性用于在内容周围生成空间。
填充清除内容周围的区域（边框内） 一个元素。
使用 CSS，您可以完全控制填充。那里 是用于为元素的每一侧设置填充的 CSS 属性 （上、右、下和左）。

因此，简单地说，边距是元素周围的空间，而填充是元素一部分的内容周围的空间。

这张来自 codemancers 的图片显示了边距和边框是如何被分割的，以及边框和内容框是如何使其不同的。

此外，他们定义每个部分如下：

• 内容 - 这定义了实际内容（如文本、图像或其他元素）所在的框的内容区域。
• 填充 - 这将清除其包含框中的主要内容。
  
• 边框 - 这围绕着内容和填充。
• 边距 - 此区域定义了一个透明空间，将其与其他元素分隔开来。

边缘

边距通常用于在元素本身及其周围环境之间创建空间。

例如，我在构建导航栏时使用它，使其粘在屏幕边缘并且没有白色间隙。

填充

我通常在边框内有一个元素或类似的东西时使用，我想减小它的大小，但当时我想保持它周围其他元素之间的距离或边距。<div>

简而言之，这是情境性的;这取决于你想做什么。

我总是使用这个原则：

这是 Firefox 中 inspect 元素功能的盒子模型。它像洋葱一样工作：

• 您的内容位于中间。
• 填充是内容与标记边缘之间的空间 里面。
• 边框及其规格
• 边距是标记周围的空间。

因此，更大的边距将在包含内容的框周围腾出更多空间。

较大的填充将增加您的内容与其所在的框之间的空间。

如果框设置为特定值，它们都不会增加或减少框的大小。

边距在框外，填充在框内