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

When to use margin vs padding in CSS

提问by Alex Angas

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use marginand when to use padding?

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

采纳答案by pavon

TL;DR:By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

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

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

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

Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.

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

So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.

所以你最终会得到第一个元素的内容，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。

Thus the content of the two elements will end up being 2emapart.

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

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.

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

So in this example, you will end up with the content of the first element followed by 1emof combined margin followed by the content of the second element. So the content of the two elements is only 1emapart.

所以在这个例子中，你最终会得到第一个元素的内容，然后1em是组合边距，然后是第二个元素的内容。所以这两个元素的内容只是1em分开的。

This can be really useful when you know that you want to say 1emof spacing around an element, regardless of what element it is next to.

当你知道你想说1em一个元素周围的间距时，这真的很有用，不管它旁边是什么元素。

The other two big differences are that padding is included in the click region and background color/image, but not the margin.

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

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>

回答by John Boker

Margin is on the outside of block elements while padding is on the inside.

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

• Use margin to separate the block from things outside it
• Use padding to move the contents away from the edges of the block.

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

回答by Scott

The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.

我见过的最好的通过示例、图表甚至“自己尝试”视图来解释这一点的方法在这里。

The diagram below I think gives an instant visual understanding of the difference.

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

One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3supporting it.

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

回答by stvnrynlds

There are more technical explanations for your question, but if you're looking for a way to think aboutmargin & padding that will help you choose when and how to use them, this might help.

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

Compare block elements to pictures hanging on a wall:

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

• The browser windowis just like the wall.
• The contentis just like a photograph.
• The marginis just like the wall space between framed pictures.
• The paddingis just like the matting around a photo.
• The borderis just like the border on a frame.

• 该浏览器窗口就像是在墙上。
• 的内容是一样的照片。
• 该保证金就像镶框的照片之间的墙壁空间。
• 该填充就像围绕着照片抠图。
• 该边界就像一个框上的边框。

When deciding between margin & padding, it's a nice rule of thumb to use marginwhen you're spacing an element in relationship to other things on the wall, and paddingwhen you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will typically make the element bigger¹.

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

¹This default box model can be altered with the box-sizingattribute.

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

回答by Touhid Rahman

MARGINvs PADDING:

边距与填充：

1. Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.

2. Margin is not part of an element where padding is part of element.

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

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

Please refer below image extracted from Margin Vs Padding - CSS Properties

请参考下面从Margin Vs Padding - CSS Properties 中提取的图片

回答by Pulkit Anchalia

From https://www.w3schools.com/css/css_boxmodel.asp

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

Explanation of the different parts:

• Content- The content of the box, where text and images appear

• Padding- Clears an area around the content. The padding is transparent

• Border- A border that goes around the padding and content

• Margin- Clears an area outside the border. The margin is transparent

不同部分的解释：

• 内容- 框的内容，文本和图像出现的地方

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

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

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

Live example (play around by changing the values): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

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

回答by Frank Schwieterman

Here is some HTML that demonstrates how paddingand marginaffect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent.

这里有一些 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>

回答by pixeltocode

The thing about margins is that you don't need to worry about the element's width.

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

Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20pxto keep the 'fit' and not disturb other elements around it.

就像当你给一些东西时{padding: 10px;}，你必须将元素的宽度减少20px以保持“适合”并且不干扰它周围的其他元素。

So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.

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

Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.

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

回答by Mohammad Golahi

The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.

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

it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.

这意味着您的元素不知道其外部边距，因此如果您正在开发动态 Web 控件，我建议您尽可能使用填充与边距。

note that some times you have to use margin.

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

回答by MAChitgarha

It's good to know the differences between marginand padding. Here are some differences:

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

• Margin is outer spaceof an element, while padding is inner spaceof an element.

• Margin is the space outside the border of an element, while padding is the space inside the border of it.

• Margin accepts the value of auto: margin: auto, but you can't set padding to auto.

• Margin can be set to any number, but padding must be non-negative.

• When you style an element, padding will also be affected (e.g. background color), but not margin.

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

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

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

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

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