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

Question

在编写 CSS 时，在决定何时使用 margin 和何时使用 padding 时是否应使用特定的规则或指南？

Answer 1

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

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

• 照片是内容。
• 垫子是padding。
• 框架造型是边框。
• 墙是视口。
• 两帧之间的间距是ma​​rgin。

考虑到这一点，一个好的经验法则是，当您想将一个元素与墙上的其他元素隔开时，使用 ma​​rgin，而当您正在调整元素本身的外观。 Margin 不会改变元素的大小，但是 padding 会使元素变大¹.

---

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

Answer 2

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

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

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

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

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

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

所以在这个例子中，你会得到第一个元素的内容，然后是 1em 的组合边距，然后是第二个元素的内容。所以这两个元素的内容只有1em分开。

当您知道要在元素周围说出 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>

Answer 3

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

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

• Margin 是元素边框外的空间，而 padding 是元素边框内的空间。

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

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

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

Answer 4

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

不同部分的解释：

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

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

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

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

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

Answer 5

边距

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

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

填充

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

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

Answer 6

我一直使用这个原则：

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

• 您的内容在中间。
• 填充是您的内容和标签边缘之间的空间 里面。
• 边框及其规格
• 边距是标签周围的空间。

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

较大的内边距会增加您的内容与其所在的盒子之间的空间。

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

Answer 7

边距在框外，内边距在框内

Answer 8

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

1) 保证金

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

2) 填充

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

Margins 是元素周围的空间，而 Padding 是元素周围内容的空间。

这张来自codemancers 的图片展示了边距和边框是如何结合在一起的，以及边框框和内容框是如何不同的。

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

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

Answer 9

高级边距与填充说明

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

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

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

2. 您正在补偿供应商 *cough* Mozilla *cough* 拒绝修复的高度杂项浏览器错误，并且确定（在您与 W3C 和 WHATWG 编辑定期交流的程度上）您 必须有一个可行的解决方案，并且该解决方案不会影响除您要补偿的错误之外的任何样式。

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

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

Answer 10

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

就像你给{padding: 10px;}一样，你必须将元素的宽度减少20px以保持'fit'并且不干扰其他元素围绕它。

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

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

Answer 11

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

$(".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>

Answer 12

MARGIN vs PADDING：

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

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

请参考下图摘自Margin Vs Padding - CSS Properties

Answer 13

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

这意味着你的元素不知道它的外部边距，所以如果你正在开发动态网页控件，我建议尽可能使用 padding vs margin。

请注意，有时您必须使用边距。

Answer 14

margin 位于块元素的外部，而 padding 位于内部。

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

Answer 15

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

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

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

Answer 16

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