保证金和填充之间的差异？

Question

CSS中的边距和填充之间究竟有什么区别？它似乎没有多少用途.你能举个例子说明差异在哪里(为什么知道差异很重要)？

Answer 1

padding是内容和之间的空间border,而margin边界之外的空间.这是我通过快速谷歌搜索找到的图像,它说明了这个想法.

Answer 2

这里的答案中缺少一个关键的问题:

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

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

Answer 3

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

填充应用于元素的内部,从而影响元素内容离边界的距离.

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

Answer 4

记住以下3点:

• 边距是控件周围的额外空间.
• Padding是控件内部的额外空间.
• 外部控件的填充是内部控件的边距.

演示图片:(需要红色框控制)

Answer 5

最简单的辩护是; padding是容器元素边界内给出的空间,边距是在外面给出的.对于不是容器的元素,填充可能没有多大意义,但保证金的默认将有助于安排它.

Answer 6

填充是边界内的空间,而边距是边界外的空间.

Answer 7

填充

填充是一个CSS属性,用于定义元素内容与其边框之间的空间(如果它具有边框).如果元素周围有边框,则填充将从该边框向该边框中显示的元素内容提供空间.如果元素周围没有边框,则添加填充对该元素完全没有影响,因为没有边框可以提供空间.

余量

Margin是一个CSS属性,它将元素外部的空间定义为其下一个外部元素.

保证金会影响具有或没有边界的元素.如果元素具有边框,则边距将定义从此边框到下一个外部元素的空间.如果元素没有边框,则margin会定义元素内容到下一个外部元素的空间.

填充和边距之间的区别

因此,边距和填充之间的区别在于,当填充处理内部空间时,边距处理外部空间到下一个外部元素.

Answer 8

margin =从边界向外的元素周围(外部).

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

看到这里:http://jsfiddle.net/robx/GaMpq/

Answer 9

在任何答案中都没有提到边距和填充之间的关键差异之一:可点击性和悬停检测

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

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

Answer 10

很高兴知道margin和之间的差异padding.我所知:

• 边距是元素的外部空间,而边距是元素的内部空间.换句话说,边距是元素边框外的空间,而边距是边框内的空间.
• 您可以将auto值设置为保证金.但是,它不允许填充.看到这个.
  注意:用于margin: auto将块元素水平居中于其父元素内.此外,通过将边距设置为自动,可以将元素垂直或水平或两者都集中在Flexbox中.看到这个.
• 保证金可以是任何浮点数,但填充不得为负数.
• 在为元素设置样式时,也会对样式进行填充; 但不是保证金.边距获取父元素的样式.例如,当您将background-color属性设置为黑色时,其内部空间(即填充)将为黑色,但不是其外部空间(即边距).