何时在CSS中使用margin和padding [关闭]

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

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>

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

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

我所见过的最好的例子，图表甚至“尝试一下”视图都在这里解释。

我认为下面的图表可以直观地了解两者之间的区别。

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

有关您的问题的更多技术解释，但是如果您正在寻找一种思考边距和填充的方法，可以帮助您选择何时以及如何使用它们，则可能会有所帮助。

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

• 该浏览器窗口就像是在墙上。
• 的内容是一样的照片。
• 页边距就像两张装裱的图片之间的墙面空间一样。
• 该填充就像围绕着照片抠图。
• 该边界就像一个框上的边框。

当保证金和填充之间的决定，这是经验的一个很好的规则来使用保证金，当你在关系到其他事情上墙，间距元素填充时，要调整的元素本身的外观。边距不会更改元素的大小，但是填充通常会使元素变大¹。

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

保证金与填充：

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

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

请参考下面的图片，该图片摘自Margin Vs Padding-CSS属性

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

不同部分的说明：

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

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

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

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

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

这是一些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>

关于边距的事情是，您不必担心元素的宽度。

就像您提供一些东西一样{padding: 10px;}，您必须将元素的宽度减小20 像素才能保持“ 合适 ”，并且不会干扰周围的其他元素。

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

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

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

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

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

这是很好的了解之间的差异margin和padding。以下是一些区别：

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

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

• 保证金接受auto：的值margin: auto，但是您不能将padding设置为auto。

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

• 在设置元素样式时，填充也会受到影响（例如背景色），但空白不会受到影响。

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

高级保证金与填充说明

用padding空格分隔元素中的内容是不合适的。你必须利用margin上子元素来代替。较旧的浏览器（例如Internet Explorer）会误解盒子模型，除非要使用margin它，否则它会在Internet Explorer 4中完美运行。

有当使用两个例外padding 是适当的使用：

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

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

当您拥有100％宽度的元素时，padding: 50px;您可以有效获得width: calc(100% + 100px);。以来margin是不加入width也不会造成意想不到的布局问题，当您使用margin上child elements，而不是padding直接的元素。

因此，如果您不执行上述两项操作之一，请不要在元素中添加填充，而应在直接子元素中添加填充，以确保在其中获得预期的行为所有浏览器都能。

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

1）边距

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

2）填充

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

所以，简单地边距是元素周围的空间，而填充有内容周围空间其是元件的一部分。

该图片来自Codemancers显示了边距和边框如何融合以及边框和内容框如何使其与众不同。

他们还定义了每个部分，如下所示：

• 内容 -定义框的内容区域，其中包含文本，图像或其他元素之类的实际内容。
• 填充 -从其包含的框中清除主要内容。
  
• 边界 -包围内容和填充。
• 边距 -此区域定义了一个透明空间，将其与其他元素分隔开。

我一直使用这个原则：

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

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

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

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

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

余量

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

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

填充

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

简而言之，这是情况。这取决于您要做什么。

保证金在盒子外面，填充物在盒子里面