填充和边距有什么区别？答案

【问题标题】：what's the difference between padding and margin?填充和边距有什么区别？
【发布时间】：2011-02-18 21:53:53
【问题描述】：

在 W3 CSS 和 XUL/CSS 中？（不在 CSS 和 XUL/CSS 之间）。

【问题讨论】：

【解决方案1】：

我向您推荐这篇文章。该图来自那篇文章。

【讨论】：

【解决方案2】：

填充是元素内部的空间（在元素的边框内）。

边距是元素外（周围）的空间。

【讨论】：

呃。为什么要投票赞成？根据 CSS 盒子模型，这是不真实的。 w3.org/TR/CSS2/box.html
@ghoppe - 你在说什么？边距是元素周围/外部的间距。填充是内部的。
@ghoppe 这真的不会改变我的答案。他没有提到宽度，他问的是区别。
@ghoppe ...您的照片只是证实了我的帖子。看看其他人都在说什么，我们都是对的。
@webdestroya @Michael 说“填充使边框移动（特别是扩展）。边距使周围的元素移动。” -- 填充也会导致周围元素移动。这让许多网页设计师感到困惑。

【解决方案3】：

内边距是内容和边框之间的区域，而边距是边框之外的区域。

请参阅CSS box model 了解详情。

【讨论】：

【解决方案4】：

好的，其中一些答案使用了令人困惑的术语并且是错误的。

元素的 css 宽度不包括内边距、边框或边距。

因此说“填充在元素内部”是不准确的。

“内边距在元素边框内”和“边距在元素边框外”的说法是正确的。

计算一个盒子占据了多少空间（例如，只是水平）：

horiz. space = width + 2(padding) + 2(border) + 2(margin)

当人们说“padding 是元素内部的空间”时，我感到很困惑，因为：元素有 padding，它有一个边框，它有边距。所有这些东西都在元素的内容宽度之外，并且在计算元素占用的空间时必须考虑在内。

如果你说“填充在元素内部”，那么你就犯了 MSIE 在破盒模型中所犯的同样错误，这让无数的网页设计师感到头疼。

【讨论】：

【解决方案5】：

填充是元素宽度的一部分。边距在外面，不是宽度的一部分

这是一个有趣的盒子模型演示，可以帮助您理解。

【讨论】：

填充不是元素宽度的一部分。 #div1 {width: 500px; padding: 10px;} 在屏幕上看起来会比 #div2 {width: 500px; padding: 0px;} 大（除非你是一个坏掉的 MSIE 盒子模型：456bereastreet.com/archive/200612/…）
是的，填充将使该框“更宽”。该框将是 520px 宽。破碎的 ie 盒子模型仍然是 500px 宽，它为填充腾出空间。它的语义。我知道你在说什么，我想这很难用正确的语言表达。需要一张照片。