何时在 CSS 中使用边距与填充

编写 CSS 时,在确定何时使用margin和何时使用padding时是否应使用特定的规则或准则?

答案

TL; DR: 默认情况下,我在所有地方都使用空白,除非我有边框或背景并且想要增加该可见框内的空间。

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

考虑两个元素彼此1em ,填充为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支持边框,边框在某种程度上卷土重来

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

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

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

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

1 可以使用box-sizing属性更改此默认盒子模型。

保证金填充

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

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

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

保证金与填充

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

不同部分的说明:

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

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

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

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

CSS盒子模型的插图

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

这是一些 HTML,演示了paddingmargin如何影响可点击性和背景填充。对象收到对其填充的点击,但单击对象边缘区域的点击到达其父对象。

$(".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;} ,您必须将元素的宽度减小20px才能保持 ' fit ' 且不会干扰周围的其他元素。

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

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

边距清除元素周围(边框之外)的区域,但填充清除元素周围(边框内)的区域。

在此处输入图片说明

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

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

很高兴知道marginpadding之间的区别。这里有一些区别:

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

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

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

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

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