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

Posted 2023-03-06

【中文标题】何时在 CSS 中使用边距与内边距 [关闭]

【英文标题】：When to use margin vs padding in CSS [closed]

【发布时间】：2011-01-12 11:10:13

【问题描述】：

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

【问题讨论】：

当你想增加focusable area时，在<a>标签上使用padding。

【参考方案1】：

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

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

照片是

内容

。 垫子是

padding

。 框架造型是

边框

。 墙是

视口

。 两帧之间的间距是

ma​​rgin

。

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

---

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

【讨论】：

其实我不同意box-sizing: border-box 让“内容的空间更小”。这是一个带有 2 个框的小提琴，如果我一直填充相同并添加“活动”，然后在悬停时添加“停用”，那么我是否使用 box-sizing 并不重要。它仍然会扩大盒子。我必须将填充最大化到框将扩展到的最长，然后使用反复试验来为进入框中的其他单词提供匹配组合，以保持每个单词的宽度相同：jsfiddle.net/navyjax2/ngzqqjah

嘿vapcguy，感谢您的意见。我的陈述通常是正确的，当为元素声明宽度或高度时，而具有未声明尺寸的元素实际上不受border-box 的影响（请参阅：jsfiddle.net/8yravLmL/1）。我会让我的答案更加细致入微以避免混淆。

【参考方案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>

【讨论】：

+1 在设计排版和段落、标题和列表的简短序列时，几乎总是更好地用边距分隔元素，因为相邻的边距折叠行为。

为什么垂直边距折叠而水平边距不折叠？这可能会让很多人感到困惑

垂直边距仅对块元素折叠。对于内联块元素，边距是垂直和水平添加的。所以我不确定水平边距不会在块元素上折叠是一个问题，因为它们无论如何都会填充它们的容器。

"为什么垂直边距折叠而水平边距不折叠？"在不使用浮动的情况下，没有任何机制可以让块元素彼此并排 - 其边距永远不会折叠（甚至是垂直）或绝对定位，显然没有折叠，或内联块，它使用不同的模型考虑内联和内容（空格、文本）很重要，或者其他东西，如表格、弹性框、列之间的间隙具有特殊行为的列。所以简而言之，即使可能，也没有地方可以使用水平边距折叠可以

另外你应该注意填充包含在元素的总宽度/高度中，当与box-sizing: border-box;一起使用时，如果你有width: 100px; padding-left: 20px;，总宽度仍然是100px，但是内容的区域减少了 20 像素，不像 box-sizing: content-box; 在计算内容宽度时填充是分开的，这使得内容框中的总宽度为 120 像素；

【参考方案3】：

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

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

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

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

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

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

【参考方案4】：

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

不同部分的解释：

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

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

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

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

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

【参考方案5】：

边距

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

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

填充

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

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

【参考方案6】：

我一直使用这个原则：

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

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

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

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

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

【参考方案7】：

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

【讨论】：

这没有回答问题。

@TylerH 他只问过这个问题？？？（何时使用边距以及何时使用填充？）

是的，他就是这么问的。这如何回答何时使用每个？

【参考方案8】：

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

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

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

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

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

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

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

【讨论】：

这个答案似乎是从其他地方复制和粘贴的。 “codemancers”中包含的链接与答案无关。

亚历克斯，答案中突出显示的图片和部分来自codemancers，请在发表评论和投票之前确定这些事情

【参考方案9】：

高级边距与填充说明

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

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

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

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

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

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

【讨论】：

有趣！你有那个供应商错误的链接吗？

@AlexAngas 希望***对你有用吗？ en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

【参考方案10】：

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

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

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

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

【参考方案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>

【讨论】：

你可以在 jsfiddle 上运行类似的代码：jsfiddle.net/fschwiet/y74Nz/3

【参考方案12】：

MARGIN vs PADDING：

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

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

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

【讨论】：

引用边框，而不是相当模糊的“边距在块元素的外部，而填充在内部。”什么外面/里面？并且外部/内部建议一个静态位置，而不是它影响包含元素的大小。这个答案为我澄清了。

【参考方案13】：

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

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

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

【讨论】：

"请注意，有时您必须使用边距" 这就是问题所在。这些时间是什么时候？

【参考方案14】：

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

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

【讨论】：

然而，正确答案是下面的@pavon。相邻元素的边距重叠，而填充不重叠。一世。 e.，总分离度为padding(A) + padding(B) + max(margin(A), margin(B))

这是一个很好的做法：使用纯红色边框来检查内边距和边距。有时，我们可能会弄乱诸如<a> 之类的东西，它包含一些文本，被填充和边距包围。使用这个技巧来检查我们可以点击多少空间。

【参考方案15】：

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

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

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

【讨论】：

w3.org/TR/CSS2/box.html#box-dimensions和图片来自w3 w3.org/TR/CSS2/images/boxdim.png

w3schools.com/css/tryit.asp?filename=trycss_boxmodel

【参考方案16】：

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