题 何时在CSS中使用margin和padding


在编写CSS时,是否有一个特定的规则或指南应该用于决定何时使用 margin 什么时候使用 padding


1973
2018-02-03 03:20


起源




答案:


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

对我而言,填充和边距之间的最大区别在于 垂直 边距自动折叠,填充没有。考虑两个元素,一个在另一个之上,每个元素的填充为1em。此填充被视为元素的一部分,并始终保留。因此,您将得到第一个元素的内容,然后是第一个元素的填充,接着是第二个元素的填充,接着是第二个元素的内容。因此,这两个元素的内容最终将相差2em。

现在用1em边距替换该填充。边距被认为是在元素之外,并且相邻项目的边距将重叠。因此,在此示例中,您将得到第一个元素的内容,后跟1em的组合边距,后跟第二个元素的内容。所以两个元素的内容相差仅1em。

当你知道你想要在元素周围说1em的间距时,这可能非常有用,无论它在哪个元素旁边。

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


1217
2018-02-07 20:59



+1当样式排版和段落,标题和列表的abritary序列时 几乎总是 由于相邻的边缘折叠行为,最好使用边距来隔开元素。 - Pete B
你应该提到只有垂直边距会崩溃,水平边距永远不会崩溃。见 CSS 2.1规范 更多细节。 - JPelletier
为什么垂直边距会崩溃而横向边缘不会崩溃?这可能会让很多人感到困惑 - marcospgp
垂直边距仅针对块元素折叠。对于内联块元素,边距是垂直和水平添加的。所以我不确定水平边距不会在块元素上崩溃是一个问题,因为它们无论如何都要填充它们的容器。 - Mike
“默认情况下,我在任何地方使用边距,除非我有边框或背景,并希望增加可见框内的空间。” - 很好的说明,我倾向于以相反的方式做到这一点,并始终努力保持一致性。 - Yannic Welle


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

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

enter image description here


1338
2018-02-03 03:22



然而,正确答案是由@pavon在下面。相邻元素的边距重叠,而填充不重叠。一世。例如,总分离是 padding(A) + padding(B) + max(margin(A), margin(B)) - necromancer
这是一个很好的做法:使用 坚实的红色边框 检查填充和边距。有时,我们可能搞乱像 <a>,其中包含一些文字,被填充和边距包围。使用此技巧来检查我们可以点击多少空间。 - chenghuayang


我见过的最好的例子,图表,甚至是“自己尝试”的观点都是如此 这里

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

enter image description here

要记住的一件事是符合标准的浏览器(IE怪癖是一个例外)仅将内容部分渲染到给定宽度,因此在布局计算中跟踪此情况。还要注意边框有点像 用Bootstrap 3回归 支持它。


525
2018-05-04 19:21



w3.org/TR/CSS2/box.html#box-dimensions 和w3的图片 w3.org/TR/CSS2/images/boxdim.png - JP Hellemons


MARGIN VS 填充 :

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

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

请参考下面提取的图像 边距与填充 - CSS属性

Margin vs Padding


77
2018-05-21 07:00



引用边框,而不是相当模糊的“边距位于块元素的外部,而填充在内部。”外/内是什么?外部/内部表示静态位置,而不是它影响包含元素的大小。这个答案为我澄清了这一点。 - nicodemus13


对于您的问题有更多的技术解释,但如果您正在寻找一种方法 想一想 保证金和填充将帮助您选择何时以及如何使用它们,这可能会有所帮助。

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

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

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

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


73
2017-12-17 01:10



其实我不同意 box-sizing: border-box 使“内容空间更小”。这里有一个带有2个盒子的小提琴,如果我保持填充相同并添加“Active”,然后在悬停时“Deactivate”,如果我使用它并不重要 box-sizing。它仍然会扩大盒子。我不得不将填充最大化到盒子扩展到最长的填充,然后使用反复试验来为其他单词进入框中,为每个单词保持相同的宽度: jsfiddle.net/navyjax2/ngzqqjah - vapcguy
嘿vapcguy,谢谢你的意见。当声明元素的宽度或高度时,我的声明通常是正确的,而具有未声明尺寸的元素实际上并未受到 border-box (看到: jsfiddle.net/8yravLmL/1)。我会让我的答案更加微妙,以避免混淆。 - stvnrynlds


这是一些演示如何的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>


30
2018-02-09 05:29



你可以在jsfiddle上运行类似的代码: jsfiddle.net/fschwiet/y74Nz/3 - Frank Schwieterman


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

就像你给的东西一样 {padding: 10px;},你将不得不减少元素的宽度 20像素 保持'适合'而不是打扰周围的其他元素。

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

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


30
2018-02-03 05:35





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

enter image description here

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

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


27
2017-08-01 11:28





何时使用边距和填充

CSS中有两种方法可以在元素周围创建空间:边距和填充。在大多数使用场景中,它们在功能上是相同的,但事实上,它们的行为方式略有不同。在选择用于在页面周围移动元素的边距时,应考虑边距和填充之间的重要差异。然而,在边缘或填充可以用于相同效果的那些情况下,很多决定归结为个人偏好。

何时使用保证金

  1. 您希望间距显示在由边框属性创建的“框”之外。边距位于边界之外,因此如果您希望边框位于一个位置,则可以使用它们。例如,如果您有一个带有边框的侧边栏,您希望远离主要内容区域,则此功能非常有用。

  2. 您不希望背景颜色或图像侵入您的个人空间。背景颜色和图像停在边框处,因此如果您希望将背景保留在正在制作的空间之外,则边距是您想要的属性。

  3. 您希望元素顶部和底部的可折叠空间。顶部和底部边距的行为与边缘不同,因为如果两个边距彼此叠加,它们会折叠到最大边距集的大小。例如,如果我将段落设置为20像素的上边距和15像素的下边距,我将在段落之间只有20像素的空间(两个边距相互折叠,最大的胜出) 。

何时使用填充

  1. 您希望创建的所有空间都位于边框内。填充包含在您的边框内,因此将边框推离元素内部非常有用。

  2. 您需要背景颜色/图像才能继续进入您正在创建的空间。您的背景将继续在您的填充后面,所以只有在您希望您的背景透视时才使用它。

  3. 您希望顶部和底部空间的行为更加严格。例如,如果您将文档中的段落设置为20像素的顶部填充和15像素的底部填充,那么只要您连续有两个段落,它们实际上总共有35个像素的空间它们之间。


21
2017-09-09 20:00