何时在 CSS 中使用边距与内边距 [关闭]

TL;DR：默认情况下，我在任何地方都使用边距，除非我有边框或背景并且想要增加可见框内的空间。

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

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

所以你最终会得到第一个元素的内容，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。

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

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

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

当您知道要在元素周围说出 1em 间距时，这将非常有用，而不管它位于哪个元素旁边。

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

div.box > div { 高度：50px;宽度：50px；边框：1px纯黑色；文本对齐：居中； } div.padding > div { padding-top: 20px; } div.margin > div { margin-top: 20px; }

默认

padding-顶部：20px

margin-top ：20像素；

---

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

使用边距将块与其外部的东西分开

使用填充将内容从块的边缘移开。

https://i.stack.imgur.com/UHD7W.gif

---

我见过用示例、图表甚至“自己尝试”视图来解释这一点的最佳方法是 here。

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

https://i.stack.imgur.com/PeSIJ.gif

要记住的一件事是符合标准的浏览器 (IE quirks is an exception) 仅将内容部分呈现给给定的宽度，因此请在布局计算中跟踪这一点。另请注意，边框框有点 comeback with Bootstrap 3 支持它。

---

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

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

照片就是内容。

垫子是填充物。

框架成型是边框。

墙是视口。

两帧之间的空间是边距。

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

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

---

边距与填充：

边距在元素中用于创建该元素与页面其他元素之间的距离。填充用于创建元素的内容和边框之间的距离。边距不是元素的一部分，而填充是元素的一部分。

请参阅以下从 Margin Vs Padding - CSS Properties 中提取的图像

https://i.stack.imgur.com/PaLp6.jpg

---

来自https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明： 内容 - 显示文本和图像的框的内容 填充 - 清除内容周围的区域。填充是透明的 边框 - 围绕填充和内容的边框 边距 - 清除边框外的区域。边距是透明的

现场示例（通过更改值来玩）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

---

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

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

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

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

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

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

---

下面是一些 HTML，演示了 padding 和 margin 如何影响可点击性和背景填充。对象接收对其填充的点击，但点击对象的边缘区域会转到其父级。

$(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); }); .outer { 填充：10px;背景：红色； } .inner { 边距：10px;填充：10px；背景：蓝色；边框：纯白1px； }

---

关于边距的事情是你不需要担心元素的宽度。

就像您提供 {padding: 10px;} 一样，您必须将元素的宽度减小 20px 以保持“fit”并且不干扰它周围的其他元素。

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

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

---

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

https://i.stack.imgur.com/XyRhQ.png

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

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

---

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

---

高级边距与填充解释

使用 padding 来分隔元素中的内容是不合适的；您必须在子元素上使用margin。旧版浏览器（例如 Internet Explorer）误解了盒子模型，除非在使用 margin 时，它在 Internet Explorer 4 中运行良好。

使用 padding is 适合使用时有两个例外：

它应用于不能包含任何子元素的内联元素，例如输入元素。您正在补偿供应商 *cough* Mozilla *cough* 拒绝修复的高度杂项浏览器错误，并且确定（在您与 W3C 和 WHATWG 编辑定期交流的程度上）您必须有一个有效的解决方案和这个解决方案除了您要补偿的错误之外，不会影响其他任何东西的样式。

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

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

---

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

1) 边距 CSS 边距属性用于在元素周围生成空间。边距属性设置边框外空白区域的大小。使用 CSS，您可以完全控制边距。有一些 CSS 属性可用于设置元素每一侧的边距（顶部、右侧、底部和左侧）。

2) 填充 CSS 填充属性用于在内容周围生成空间。填充清除元素内容周围（边框内）的区域。使用 CSS，您可以完全控制填充。有用于设置元素每一侧（顶部、右侧、底部和左侧）的填充的 CSS 属性。

所以简单地说，Margins 是元素周围的空间，而 Padding 是元素周围的空间，内容是元素的一部分。

https://i.stack.imgur.com/p4gYJ.png

codemancers 中的这张图片显示了边距和边框如何结合在一起，以及边框框和内容框如何使其不同。

他们还将每个部分定义如下：

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

---

我总是使用这个原则：

https://i.stack.imgur.com/039iW.png

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

您的内容在中间。

填充是您的内容和它所在的标签边缘之间的空间。

边框及其规格

边距是标签周围的空间。

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

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

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

---

利润

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

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

填充

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

简而言之，它是情境性的；这取决于您要做什么。

---

边距在框外，填充在框内

---