2023-11-10 10:02:13

边距和填充的区别?

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


当前回答

Padding是内容和边框之间的空间,而margin是边框之外的空间。这是我从谷歌快速搜索中找到的一张图片,它说明了这个想法。

其他回答

记住这三点:

边距是控件周围的额外空间。 填充是控件内部的额外空间。 外部控件的Padding是内部控件的Margin。

演示图片:(红框为欲望控制)

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

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

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

自我说明图像

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

边距和填充之间的一个关键区别在任何答案中都没有提到:点击性和悬停检测

增加填充会增加元素的有效大小。有时我有一个很小的图标,我不想让它看起来更大,但用户仍然需要与该图标进行交互。我增加了图标的填充,让点击和悬停的足迹更大。增加图标的边距不会有同样的效果。

关于这个主题的另一个问题的回答给出了一个例子。

有一个重要的区别:

边距——位于元素的外部,即在元素开始后应用空格移位。 Padding-在内部,另一个将在元素开始之前应用空白。