css - 何时在 CSS 中使用边距与内边距

Question

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

score 1739 · Accepted Answer

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

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

考虑两个元素，一个在另一个之上，每个元素都有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>

score 1553 · Accepted Answer

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

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

在此处输入图像描述

score 609 · Accepted Answer

我见过的最好的用示例、图表甚至“自己尝试”的视图来解释这一点在这里。

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

在此处输入图像描述

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

score 120 · Accepted Answer

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

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

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

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

^{1您可以使用} 属性更改此行为。box-sizing

score 89 · Accepted Answer

边距与填充：

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

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

边距与填充

score 55 · Accepted Answer

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

不同部分的解释：

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

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

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

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

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

score 38 · Accepted Answer

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

边距是元素的外部空间，而填充是元素的内部空间。
边距是元素边界外的空间，而填充是元素边界内的空间。
Margin 接受 auto: 的值margin: auto，但不能将 padding 设置为 auto。
边距可以设置为任意数字，但填充必须为非负数。
当您为元素设置样式时，填充也会受到影响（例如背景颜色），但不会影响边距。

score 35 · Accepted Answer

下面是一些 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>

score 34 · Accepted Answer

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

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

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

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

score 30 · Accepted Answer

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

在此处输入图像描述

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

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

score 18 · Accepted Answer

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

score 18 · Accepted Answer

高级边距与填充解释

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

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

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

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

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

score 14 · Accepted Answer

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

1) 边距

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

2) 填充

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

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

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

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

内容- 这定义了文本、图像或其他元素等实际内容所在的框的内容区域。

填充- 这会清除其包含框中的主要内容。

边框- 围绕内容和填充。

边距- 该区域定义了一个透明空间，将其与其他元素分开。

score 8 · Accepted Answer

我总是使用这个原则：

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

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

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

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

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

score 7 · Accepted Answer

利润

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

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

填充

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

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

score -2 · Accepted Answer

-2

边距在框外，填充在框内

于 2018-03-29T10:41:37.100 回答

css - 何时在 CSS 中使用边距与内边距

16 回答 16

利润

填充

Related

Reference