内边距和外边距有什么区别?

11

在W3 CSS中以及在XUL/CSS中也是如此(不是CSS和XUL/CSS之间)。


6个回答

21

8

Padding是元素内部(即元素边框内部)的空间。

Margin是元素外部(即周围)的空间。


2
为什么这个被投票了?根据CSS盒模型,这是不正确的。http://www.w3.org/TR/CSS2/box.html - ghoppe
2
@ghoppe - 你在说什么?Margin是元素周围/外部的间距。Padding是内部的。 - Mitch Dempsey
2
@ghoppe,这并不改变我的答案。他没有提到宽度,他只是问有什么区别。 - Mitch Dempsey
1
@ghoppe...你的照片证实了我的帖子。看看其他人在他们的中所说的,我们都是正确的。 - Mitch Dempsey
1
@Webdestroya @Michael说:“填充使边框移动(特别是扩展)。边距使周围元素移动。”-- 填充还会导致周围元素移动。这让许多网页设计师感到困惑。 - ghoppe
显示剩余17条评论

2

Padding是指内容区域与边框之间的空间,而margin则是边框外面的空间。

详见CSS盒子模型了解更多信息。


1

好的,其中一些答案使用了混淆术语并且是错误的。

元素的CSS宽度不包括填充、边框或外边距。

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

正确的说法是“填充在元素的边框内部”,而“外边距在元素的边框外部”。

要计算一个盒子占用多少空间(例如,仅水平方向):

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

当人们说“填充是元素内部的空间”时,我感到很困扰,因为:元素具有填充、边框和外边距。所有这些东西都在元素的内容宽度之外,必须在计算元素占用多少空间时加以考虑。

如果你说“填充在元素内部”,那么你就犯了与 MSIE 在其破碎的盒子模型中一样的错误,导致无数网络设计师头痛不已。

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/


0
外边距是元素边框外的空间。它在元素边框和相邻元素之间创建空间。 它用于控制元素之间的外部间距。
内边距是元素边框内的空间。它在元素内容和边框之间创建空间。 它用于控制元素内容与边框之间的内部间距。

0

内边距是元素宽度的一部分。外边距在外面,不是宽度的一部分。

这里有一个有趣的盒模型演示,可以帮助您理解。

http://redmelon.net/tstme/box_model/


填充不是元素宽度的一部分。#div1 {width: 500px; padding: 10px;} 在屏幕上看起来比 #div2 {width: 500px; padding: 0px;} 更大(除非你使用破损的 MSIE 盒模型:http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/)。 - ghoppe
是的,填充会使那个盒子“更宽”。那个盒子将有520像素宽。破碎的IE盒模型仍然是500像素宽,它为填充留出了空间。这是语义学。我知道你在说什么,我想这只是很难用正确的话来表达。需要一张图片。 - Galen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接