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
Difference between margin and padding?
提问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
padding
is the space between the content and the border
, whereas margin
is the space outside the border. Here's an image I found from a quick Google search, that illustrates this idea.
padding
是内容和 之间的空间border
,而margin
是边框外的空间。这是我从谷歌快速搜索中找到的一张图片,它说明了这个想法。
回答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
回答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 margin
and 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
auto
value to margin. However, it's not allowed for padding. See this.
Note:Usemargin: auto
to 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-color
property 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/