在CSS中使用边距和边距。

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

在编写CSS时，是否有一个特定的规则或指导原则应该用于决定何时使用边界和何时使用填充?

18 个解决方案

#1

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.

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

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. 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 content of the two elements will end up being 2em apart.

在我看来，边距和边距最大的区别是垂直边距自动折叠，而填充则没有。考虑两个元素，一个在另一个上面，每个元素的填充都是1em。这个填充被认为是元素的一部分，并且总是被保留。因此，您将得到第一个元素的内容，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。因此，这两个元素的内容将会被分解为2em。

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap. So in this example you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

现在用1em页边替换填充。边距被认为是在元素之外，相邻项的边距将会重叠。在这个例子中，你最终会得到第一个元素的内容，然后是第一个元素的总和，然后是第二个元素的内容。所以这两个元素的内容只有1em。

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

当你知道你想要在一个元素周围写1em，而不管它旁边的元素是什么时，这是非常有用的。

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

另外两个最大的区别是，在单击区域和背景颜色/图像中包含了填充，但没有包括边距。

#2

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.
• 使用填充将内容从块的边缘移开。

#3

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 3 supporting it.

要记住的一件事是标准兼容的浏览器(例如，quirks是一个例外)只将内容部分呈现给给定的宽度，所以在布局计算中要注意这一点。还注意到，边界框在引导3支持它的情况下可以看到某种程度的回归。

#4

MARGIN vs PADDING :

保证金vs填充:

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.

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

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

请参考下面的图片，从边缘和填充- CSS属性。

#5

There are more technical explanations for your question, but if you're looking for a way to think about margin & 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 window is just like the wall.
• 浏览器窗口就像墙一样。
• The content is just like a photograph.
• 内容就像一张照片。
• The margin is just like the wall space between framed pictures.
• 边缘就像边框之间的图片。
• The padding is just like the matting around a photo.
• 填充物就像照片上的垫子一样。
• The border is just like the border on a frame.
• 边界就像边框一样。

When deciding between margin & padding, it's a nice rule of thumb to use margin when you're spacing an element in relationship to other things on the wall, and padding when 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-sizing attribute.

这个默认的框模型可以用box- size属性改变。

#6

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

下面是一些HTML，演示了填充和边缘如何影响可点击性和背景填充。一个对象接受点击到它的填充，但是点击一个对象边缘的区域去它的父。

$(".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>

#7

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 20px to keep the 'fit' and not disturb other elements around it.

就像当你给某样东西{填充:10px;}，你将不得不减少20px的元素宽度以保持“fit”，而不影响它周围的其他元素。

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

因此，我通常会使用paddings来让所有东西都“打包”，然后使用边距进行微调。

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

另一件需要注意的事情是，在不同的浏览器上，paddings会更一致，IE不会很好地处理负边界。

#8

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控件，我建议您可以使用填充vs . margin。

note that some times you have to use margin.

注意，有些时候你必须使用边距。

#9

When to Use Margins and Padding

There are two ways in CSS to create space around your elements: margins and padding.In most usage scenarios, they are functionally identical but in truth, they do behave in slightly different ways. There are important differences between margins and padding that you should take into consideration when choosing which to use to move elements around the page. However, in those cases where either margins or padding could be used to the same effect, a lot of the decision comes down to personal preference.

CSS中有两种方法可以在元素周围创建空间:边距和边距。在大多数使用场景中，它们在功能上是相同的，但实际上，它们的行为方式略有不同。在选择使用哪一个元素来移动页面元素时，您应该考虑到边距和填充之间的重要区别。然而，在这些情况下，无论是边距还是边距都可以被用于相同的效果，很多的决定归结为个人偏好。

When to use margins

何时使用利润

1. You want your spacing to appear outside of the “box” created by a border property. Margins lie outside of borders, so you’d use them if you want your border to stay in one place. This can be useful if you have, for example, a sidebar with a border that you want to move away from your main content area.

   您希望您的间隔出现在由边界属性创建的“框”之外。边界在边界之外，所以如果你想让你的边界停留在一个地方，你就可以使用它们。如果你有一个边栏，你想要离开你的主要内容区域，这可能会很有用。

2. You don’t want your background color or image to invade your personal space. Background colors and images stop at the border, so if you’d rather keep your backgrounds out of the space you’re making, margins are the property you want.

   你不希望你的背景颜色或图像侵犯你的个人空间。背景色和图像在边界上停留，所以如果你想让你的背景远离你的空间，你想要的是利润。

3. You’d like collapsible space on the top and bottom of your element. Top and bottom margins behave differently than side margins in that if two margins are atop one another, they collapse to the size of the largest margin set. For example, if I set paragraph to have a top margin of 20 pixels and a bottom margin of 15 pixels, I’ll only have 20 pixels of space total between paragraphs (the two margins collapse into one another, and the largest wins out).

   您希望在元素的顶部和底部可折叠空间。顶部和底部边缘的行为不同于边利润率,如果两个利润之上,他们崩溃的规模最大的利润率。例如,如果我设置段落有20像素的顶边和底部边距15像素,我只有20像素之间的空间总段(两个利润陷入,最大的胜出)。

When to use padding

何时使用填充

1. You want all of the space you’re creating to be inside your border. Padding is contained within your borders, so it’s useful for pushing your borders away from the content inside of your element.

   你想要你创造的所有空间都在你的边界之内。填充是包含在您的边框内的，因此它有助于将您的边框从元素的内容中移开。

2. You need your background color/image to continue on into the space you’re creating. Your background will continue on behind your padding, so only use it if you want your background to peek out.

   你需要你的背景颜色/图像继续进入你正在创造的空间。你的背景将继续在你的填充物后面，所以只有当你想要你的背景向外窥视时才使用它。

3. You want your top and bottom space to behave more rigidly. For example, if you set the paragraphs in your document to have a top padding of 20 pixels and a bottom padding of 15 pixels, then any time you had two paragraphs in a row, they’d actually have a total of 35 pixels of space between them.

   你想要你的顶部和底部空间表现得更严格。例如，如果您将文档中的段落设置为20个像素的顶部填充和15个像素的底部填充，那么任何时候您在一行中有两个段落时，它们之间实际上总共有35个像素的空间。

#10

One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.

要注意的一点是，当自动崩溃的边缘使你烦恼时(你并没有在你的元素上使用背景颜色)，它只是更容易使用填充。

#11

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

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

Here is the live example: (play around with changing the values) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

这里有一个实例:(使用改变值的方法)http://www.w3schools.com/css/tryit.asp?

#12

First let's look at what are the differences and what each responsibility is:

首先让我们来看看区别和每个责任是什么:

1) Margin

The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins.
There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

1)利用CSS边缘属性来生成元素周围的空间。边界属性设置了边框之外的空格的大小。使用CSS，您可以完全控制页边距。有CSS属性，用于设置元素(顶部、右、底部和左)的每个边的边界。

2) Padding

The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

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

So simply Margins are space around elements, while Padding are space around content which are part of the element.

因此，简单的边距是元素周围的空间，而填充则是元素的一部分。

This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.

这张来自codem的图片显示了边界和边框是如何连接到一起的，以及边框和内容框的区别。

Also they define each section as below:

他们还将每一节定义如下:

• Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
• 内容——这定义了框的内容区域，其中包含文本、图像或其他元素的实际内容。
• Padding - this clears the main content from its containing box.
  
• 填充——这将从包含的框中清除主要内容。
• Border - this surrounds both content and padding.
• 边界-这包括内容和填充。
• Margin - this area defines a transparent space that separates it from other elements.
• 边缘——这个区域定义了一个透明的空间，将它与其他元素分隔开。

#13

Advanced Margin versus Padding Explained

高级空白与填充解释。

It is inappropriate to use padding to space content in an element; you must utilize margin on the child element instead. Older browsers such as Internet Explorer misinterpreted the box model except when it came to using margin which works perfectly in Internet Explorer 4.

在元素中对空间内容使用填充是不合适的;您必须在子元素上使用边距。像ie这样的老浏览器会误读框模型，除非是在Internet Explorer 4中使用的边缘。

There are two exceptions when using padding is appropriate to use:

在使用填充时，有两个例外情况:

1. It is applied to an inline element which can not contain any child elements such as an input element.

   它应用于不包含任何子元素(例如输入元素)的内联元素。

2. You are compensating for a highly miscellaneous browser bug which a vendor *cough* Mozilla *cough* refuses to fix and are certain (to the degree that you hold regular exchanges with W3C and WHATWG editors) that you must have a working solution and this solution will not effect the styling of anything other then the bug you are compensating for.

   你补偿一个高度杂浏览器Mozilla bug的供应商*咳嗽* *咳嗽*拒绝修复和某些(程度与W3C和WHATWG编辑)定期举行交流,你必须有一个解决方案,这个解决方案工作不会影响任何其他的样式然后你补偿的缺陷。

When you have a 100% width element with padding: 50px; you effectively get width: calc(100% + 100px);. Since margin is not added to the width it will not cause unexpected layout problems when you use margin on child elements instead of padding directly on the element.

当你有一个100%宽度的元素填充:50px;有效地得到宽度:calc(100% + 100px);由于边距没有被添加到宽度中，所以当您在子元素上使用边距而不是直接在元素上填充时，它不会引起意料之外的布局问题。

So if you're not doing one of those two things do not add padding to the element but to it's direct child/children element(s) to ensure you're going to get the expected behavior in all browsers.

因此，如果你不做这两件事之一，不要给元素添加填充，而是直接给它的子/子元素(s)，以确保你在所有浏览器中都能得到预期的行为。

#14

CSS Margin, padding and border are Box Model properties.

CSS边界、填充和边框是框模型属性。

• Margin is space outside content.
• 边缘是内容之外的空间。
• Padding is space inside content.
• 填充是内容中的空间。
• Border is a visible outline (any color, style and width) outside padding.
• 边框是外部填充的可见轮廓(任何颜色、样式和宽度)。

Total width=content-width + padding + border.

宽度=内容宽度+填充+边框。

#15

Good to understand the different between margin and padding. There are some differences:

很好理解边距和边距的区别。有一些差异:

• Margin is outer space of an element, while Padding is inner space of an element.
• 边距是元素的外空间，而填充则是元素的内部空间。
• Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.
• 边距是元素边界之外的空间，而填充则是在元素边界内的空间。
• Margin can be value auto: margin: auto, but you can't give Padding the value of auto.
• Margin可以是value auto: Margin: auto，但是你不能给汽车的值做填充。
• Margin can be set to any numbers, but Padding must be nonnegative.
• 边距可以设置为任意数字，但填充必须是非负的。
• When you style an element, it will affect to padding space also (e.g. background color), but not to margin.
• 当你设计一个元素时，它也会影响到填充空间(例如背景色)，而不是边缘。

#16

Margin

Margin is usually used to create a space between the element itself and its surround.

边缘通常用来在元素本身和它的环绕之间创建一个空间。

for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.

例如，当我在构建一个导航条的时候，我使用它，使它粘在屏幕的边缘，而不是白色的缝隙。

Padding

I usually use when I've an element inside a border, <div> or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.

当我在边界内有一个元素时，我通常会使用，

或类似的东西，我想减小它的大小，但在我想要保持距离或它周围的其他元素之间的边界时。

So briefly, it's situational; it depends on what you are trying to do.

那么简单,它的态势;这取决于你想做什么。

#17

I always use this principle:

我总是用这个原则:

This is the box model from the inspect element feature in Firefox. It works like an onion:

这是在Firefox中检查元素特性的框模型。它的工作原理就像洋葱:

• Your content is in the middle.
• 你的内容在中间。
• Padding is space between your content and edge of the tag it is inside.
• 填充是在你的内容和标签的边缘之间的空间。
• The border and its specifications
• 边界及其规范。
• The margin is the space around the tag.
• 边缘是标签周围的空间。

So bigger margins will make more space around the box that contains your content.

因此，更大的利润空间将在包含你的内容的盒子周围创造更多的空间。

Larger padding will increase the space between your content and the box of which it is inside.

更大的填充将增加你的内容和里面的盒子之间的空间。

Neither of them will increase or decrease the size of the box if it is set to a specific value.

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

#18

Margin is outside the box and padding is inside the box

边距在方框外，填充在方框内。