CSS 边距和填充之间的区别?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5958699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:31:10  来源:igfitidea点击:

Difference between margin and padding?

css

提问by maclunian

What exactly is the difference between marginand paddingin CSS? It really doesn't seem to serve much purpose. Could you give me an example of where the differences lie (and why it is important to know the difference)?

CSS 中的边距和内边距到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明差异在哪里(以及为什么了解差异很重要)?

回答by abcd

paddingis the space between the content and the border, whereas marginis the space outside the border. Here's an image I found from a quick Google search, that illustrates this idea.

padding是内容和 之间的空间border,而margin是边框外的空间。这是我从谷歌快速搜索中找到的一张图片,它说明了这个想法。

enter image description here

在此处输入图片说明

回答by Nathan

One key thing that is missing in the answers here:

此处的答案中缺少的一项关键内容:

Top/Bottom margins are collapsible.

顶部/底部边距是可折叠的。

So if you have a 20px margin at the bottom of an element and a 30px margin at the top of the next element, the margin between the two elements will be 30px rather than 50px. This does not apply to left/right margin or padding.

因此,如果元素底部的边距为 20 像素,下一个元素的顶部边距为 30 像素,则两个元素之间的边距将为 30 像素而不是 50 像素。这不适用于左/右边距或填充。

回答by LostLin

Margin is applied to the outsideof you element hence effecting how far your element is away from other elements.

边距应用于元素的外部,从而影响元素与其他元素的距离。


Padding is applied to the insideof your element hence effecting how far your element's content is away from the border.


填充应用于元素的内部,从而影响元素的内容与边框的距离。

Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5 px padding, your div will actually be 105x105px

此外,使用边距不会影响您元素的尺寸,而填充将使您的元素尺寸(设置高度 + 填充),例如,如果您有一个 100x100px 的 div 和 5 px 的填充,您的 div 实际上将是 105x105px

回答by sms247

Remember these 3 points:

记住这3点:

  • The Margin is the extra space aroundthe control.
  • The Padding is extra space insidethe control.
  • The Padding of an outer control is the Margin of an inner control.
  • 边距是控件周围的额外空间。
  • Padding 是控件内部的额外空间。
  • 外部控件的 Padding是内部控件的 Margin

Demo Image:(where red box is desire control) enter image description here

演示图片:(其中红色框是欲望控制) 在此处输入图片说明

回答by Wind Chimez

The simplest defenition is ; padding is a space given inside the border of the container element and margin is given outside. For a element which is not a container, padding may not make much sense, but margin defenitly will help to arrange it.

最简单的辩护是;padding 是在容器元素的边界内给定的空间,而在外部给定边距。对于不是容器的元素,填充可能没有多大意义,但边距肯定有助于安排它。

回答by Abdul Gafoor

Padding is space insidethe border, whereas Margin is space outsidethe border.

填充是边界的空间,而边距是边界的空间。

回答by Rakesh Singh

Padding

填充

Padding is a CSS property that defines the space between an element content and its border (if it has a border). If an element has a border around it, padding will give space from that border to the element content which appears in that border. If an element does not have a border around it, then adding padding has no effect at all on that element, because there is no border to give space from.

Padding 是一个 CSS 属性,用于定义元素内容与其边框(如果它有边框)之间的空间。如果元素周围有边框,则填充将为从该边框到出现在该边框中的元素内容留出空间。如果一个元素周围没有边框,那么添加填充对该元素根本没有影响,因为没有边框可以提供空间。

Margin

利润

Margin is a CSS property that defines the space of outside of an element to its next outside element.

Margin 是一个 CSS 属性,用于定义元素外部与其下一个外部元素之间的空间。

Margin affects elements that both have or do not have borders. If an element has a border, margin defines the space from this border to the next outer element. If an element does not have a border, then margin defines the space from the element content to the next outer element.

边距影响有或没有边框的元素。如果一个元素有边框,margin 定义了从这个边框到下一个外部元素的空间。如果元素没有边框,则边距定义从元素内容到下一个外部元素的空间。

Difference Between Padding and Margin

填充和边距之间的区别

So the difference between margin and padding is that while padding deals with the inner space, margin deals with the outer space to the next outer element.

所以边距和填充之间的区别在于,填充处理内部空间,而边距处理到下一个外部元素的外部空间。

回答by Paul

One of the key differences between margin and padding is not mentioned in any of the answers: clickability and hover detection

任何答案中都没有提到边距和填充之间的主要区别之一:可点击性和悬停检测

Increasing the padding increases the effective size of the element. Sometimes I have a smallish icon that I don't want to make visibly larger but the user still needs to interact with that icon. I increase the icon's padding to give it a larger footprint for clicks and hover. Increasing the icon's margin will not have the same effect.

增加填充会增加元素的有效大小。有时我有一个很小的图标,我不想让它明显变大,但用户仍然需要与该图标进行交互。我增加了图标的内边距,以便为点击和悬停提供更大的空间。增加图标的边距不会产生相同的效果。

An answerto another question on this topic gives an example.

关于这个主题的另一个问题的答案给出了一个例子。

回答by MAChitgarha

It is good to know about the differences between marginand padding. As I know:

了解margin和之间的区别是很好的padding。我所知:

  • Margin is the outer spaceof an element, while padding is the inner spaceof an element. In other words, margin is the space outside of an element's border, while padding is the space inside of its border.
  • You can set autovalue to margin. However, it's not allowed for padding. See this.
    Note:Use margin: autoto center a block element inside its parent horizontally. Also, it's possible to center an element inside a flexbox vertically or horizontally or both, by setting margin to auto. See this.
  • Margin can be any float number, but padding must not be negative.
  • When you style an element, padding will be styled also; but not margin. Margin gets the parent element's style. For example, when you set the background-colorproperty to black, its inner space (i.e. padding) will be black, but not its outer space (i.e. margin).
  • 边距是元素的外部空间,而填充是元素的内部空间。换句话说,margin 是元素边框之外的空间,而 padding 是其边框内部的空间。
  • 您可以将auto值设置为边距。但是,它不允许用于填充。看到这个
    注意:用于margin: auto将块元素水平居中放置在其父元素中。此外,可以通过将 margin 设置为 auto 来垂直或水平或同时将 flexbox 内的元素居中。看到这个
  • 边距可以是任何浮点数,但填充不能为负数。
  • 当你为一个元素设置样式时,padding 也会被设置样式;但不是保证金。Margin 获取父元素的样式。例如,当您将background-color属性设置为黑色时,其内部空间(即填充)将为黑色,但其外部空间(即边距)不会。

回答by robx

margin = space around (outside) the element from border outwards.

margin = 从边框向外的元素周围(外部)的空间。

padding = space around (inside) the element from text to border.

padding = 元素周围(内部)从文本到边框的空间。

see here: http://jsfiddle.net/robx/GaMpq/

见这里:http: //jsfiddle.net/robx/GaMpq/