何时在CSS中使用margin和padding

Question

编写CSS时，是否有特定的规则或指南用于决定何时使用margin以及何时使用padding？

Answer 1

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

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

Answer 2

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

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

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

因此，您将得到第一个元素的内容，然后是第一个元素的填充，接着是第二个元素的填充，接着是第二个元素的内容。

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

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

因此，在此示例中，您将得到第一个元素的内容，后跟1em组合边距，后跟第二个元素的内容。因此，这两个元素的内容仅相隔1em。

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

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

Answer 3

我见过的最好的例子，图表，甚至是“自己尝试”的视图都是here。

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

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

Answer 4

对于您的问题有更多技术解释，但如果您正在寻找一种方法来考虑保证金和＆amp; padding将帮助您选择何时以及如何使用它们，这可能有所帮助。

将块元素与挂在墙上的图片进行比较：

• 浏览器窗口就像墙一样。
• 内容就像一张照片。
• 边距就像框架图片之间的墙面空间。
• 填充就像照片周围的消光。
• 边框就像框架上的边框一样。

在确定保证金和保证金之间时填充，当你将一个元素与墙上的其他东西隔开时，使用 margin 是一个很好的经验法则，当你调整外观时，填充是一个很好的经验法则元素本身。边距不会改变元素的大小，但填充通常会使元素更大 ¹ 。

¹ 可以使用box-sizing attribute更改此默认框模型。

Answer 5

MARGIN vs PADDING ：

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

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

请参阅以下从Margin Vs Padding - CSS Properties

中提取的图片

Answer 6

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

就像你提供{padding: 10px;}时一样，你必须将元素的宽度减少 20px 以保持'适合'而不是打扰围绕它的其他元素。

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

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

Answer 7

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

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

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

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

Answer 9

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

  

不同部分的说明：

     

  

• 内容 - 包含文字和图片的框内容

  

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

  

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

  

• 保证金 - 清除边框外的区域。保证金是透明的

  

     

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

Answer 10

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

Answer 11

了解margin和padding之间的差异很有用。以下是一些差异：

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

• 边距是元素边框外的空格，而边距是边框内的空格。

• 保证金接受auto：margin: auto的值，但您无法将填充设置为自动。

• 保证金可以设置为任何数字，但填充必须是非负数。

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

Answer 12

高级保证金与填充说明

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

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

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

2. 您正在补偿一个高度混杂的浏览器错误，供应商*咳嗽* Mozilla *咳嗽*拒绝修复并且确定（与您与W3C和WHATWG编辑定期交流的程度）您必须有一个可行的解决方案，这个解决方案不会影响你补偿的其他任何东西的样式。

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

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

Answer 13

首先让我们看看有什么不同以及每项责任是什么：

  

1）保证金

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

  

2）填充

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

因此，边距是元素周围的空间，而填充是内容周围的空间，属于元素的一部分。

来自codemancers的图片显示了边距和边框如何与边框以及内容框如何区别开来。

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

  

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

Answer 14

我总是使用这个原则：

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

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

如此大的边距会在包含您内容的框周围留出更多空间。

较大的填充会增加内容与其内部框之间的空间。

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

Answer 15

保证金

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

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

填充

我经常使用边框内的元素2y" + 5y' +3y = 0 ,y(0) = 3 and y'(0) = -4 或类似的东西，我希望减小它的大小，但当时我想保持距离或其他边距之间的距离它周围的元素。

如此简单，它的情境;这取决于你想要做什么。

Answer 16

保证金在框外，填充在框内