2023-11-10 10:02:13

边距和填充的区别?

在CSS中,边距和填充到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明区别在哪里(以及为什么知道区别很重要)吗?


当前回答

这里的答案中漏掉了一个关键的东西:

上下页边距是可折叠的。

所以如果你在一个元素的底部有一个20px的边距,在下一个元素的顶部有一个30px的边距,两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。

其他回答

最简单的定义是; Padding是容器元素边界内的一个空格,margin是容器元素边界外的一个空格。 对于不是容器的元素,填充可能没有多大意义,但空白可以帮助排列它。

Padding是边框内的空间,而Margin是边框外的空间。

边框=元素边框外的空间。

Padding =元素(内部)从文本到边框的空格。

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

这里的答案中漏掉了一个关键的东西:

上下页边距是可折叠的。

所以如果你在一个元素的底部有一个20px的边距,在下一个元素的顶部有一个30px的边距,两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。

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

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

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