问答中心分类: CSS边距和填充之间的区别?
0
匿名用户 提问 20分钟 前

到底有什么区别marginpadding在 CSS 中?它似乎真的没有多大用处。你能给我一个例子说明差异在哪里(以及为什么知道差异很重要)?

Lime 回复 20分钟 前

stackoverflow.com/questions/2189452/… stackoverflow.com/questions/3060456/… stackoverflow.com/questions/4619899/…搜索的前三个链接padding vs margin.我认为我们需要在搜索栏中添加箭头并使其变为绿色。

Lime 回复 20分钟 前

这可能会帮助您了解差异digizol.com/2006/12/margin-vs-padding-css-properties.html

Lime 回复 20分钟 前

另请注意,Internet Explorer 对边距/边框/填充宽度的求和(在默认的非怪癖模式下)与几乎所有其他浏览器不同。

Lime 回复 20分钟 前

如果边距不起作用,请尝试填充

23 Answers
0
abcd 回答 20分钟 前

padding是内容和内容之间的空间border, 然而margin是边界外的空间。这是我从快速谷歌搜索中找到的一张图片,它说明了这个想法。
在此处输入图像描述

Suroot 回复 20分钟 前

还可以查看这些站点的定义。但图形是一个完美的例证。w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp

abcd 回复 20分钟 前

@maclunian:也看看这个网站w3schools.com/css/css_boxmodel.asp除了上面的@Suroot 链接。

Nyerguds 回复 20分钟 前

这与内容的设置宽度和高度有什么关系?这一切的衡量标准在哪里?

0
Nathan 回答 20分钟 前

这里的答案中缺少的一件事是:
顶部/底部边距是可折叠的。
因此,如果您在一个元素的底部有 20px 的边距,而在下一个元素的顶部有 30px 的边距,则两个元素之间的边距将是 30px 而不是 50px。这不适用于左右边距或填充。

BoltClock 回复 20分钟 前

请注意,在非常特殊的情况下,垂直边距会塌陷——不仅仅是任何两个垂直边距都会塌陷。这只会让事情变得更加混乱(除非你非常熟悉盒子模型)。

0
LostLin 回答 20分钟 前

保证金适用于外部你的元素,从而影响你的元素与其他元素的距离。

填充应用于里面元素的大小,从而影响元素的内容与边界的距离。
此外,使用边距不会影响元素的尺寸,而填充会使元素尺寸(设置高度 + 填充),例如,如果您有一个 100x100px 的 div 和 5px 的填充,那么您的 div 实际上是 105x105px

2013Asker 回复 20分钟 前

我相信填充适用于每一面,所以元素将是 110x110px

Flater 回复 20分钟 前

嗯,afaik 填充不会改变元素的宽度,如果该宽度已设置为除auto.如果宽度是auto,然后额外的填充将相应地增加填充元素的宽度(以及从两侧,如@2013Asker 所述)

wmock 回复 20分钟 前

我认为说你的 div 将是 110px x 110px 有点误导,因为你的 div 的宽度仍然是 100px(假设 box-sizing 设置为 content-box)。

0
sms247 回答 20分钟 前

记住这3点:

  • 边距是额外的空间大约控制。
  • 填充是额外的空间里面控制。
  • 填充物外部控件是内部控件的边距.

演示图片:(红色框是欲望控制)在此处输入图像描述

GreenAsJade 回复 20分钟 前

这并没有回答为什么知道差异很重要。

0
Wind Chimez 回答 20分钟 前

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