2023-11-10 10:02:13

边距和填充的区别?

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


当前回答

你可以看看这个链接,在那里你可以看到在CSS中padding和margin是如何工作的。 https://raw.githack.com/sushantbramhacharya/WebTechnology_LEC/main/margin/index.html

其他回答

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

填充应用于元素内部,因此影响元素内容与边框的距离。

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

自我说明图像

L - Left, R- Right and T - Top, B - Bottom

我刚刚注意到一件事,但上面的答案都没有提到。如果我有一个动态创建的DOM元素,它是用空的内部html内容初始化的,如果你不希望这个空元素占用任何空间,除了它的内容被创建之外,使用边框而不是填充是一个很好的实践。

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

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

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

Padding是网页上最接近的组件之间的空间,margin是网页边缘的空间。