CSS中的边距和填充有什么区别?在何种情况下:

两者都有效。只有保证金是合适的。只有填充是合适的。


当前回答

边距在框外,填充在框内

其他回答

边缘

边距通常用于在元素本身及其周围之间创建空间。

例如,我在构建导航条时使用它,使其紧贴屏幕边缘,不会出现空白。

衬料

当我有一个元素在边框内时,我通常使用<div>或类似的东西,我想减小它的大小,但同时我想保持它周围其他元素之间的距离或边距。

简单地说,这是情境性的;这取决于你想做什么。

需要注意的一点是,当自动折叠的边距让你烦恼时(并且你没有在元素上使用背景色),使用填充更容易。

边距在框外,填充在框内

首先,让我们看看有什么不同,以及每个责任是什么:

1) 保证金CSS边距财产用于在元素周围生成空间。边距财产设置了边境使用CSS,您可以完全控制边距。有用于设置元素每边边距的CSS财产(顶部、右侧、底部和左侧)。


2) 衬垫CSS填充财产用于在内容周围生成空间。填充将清除内容(边框内)周围的区域元素。使用CSS,您可以完全控制填充。那里是CSS财产,用于设置元素每一侧的填充(顶部、右侧、底部和左侧)。

所以简单地说,边距是元素周围的空间,而填充是元素内容周围的空间。

这张来自codemancers的图片显示了边距和边框是如何结合的,以及边框和内容框是如何使其不同的。

此外,他们对每个部分的定义如下:

内容-这定义了文本、图像或其他元素等实际内容所在的框的内容区域。填充-这将清除其包含框中的主要内容。边框-它包围内容和填充。边距-此区域定义一个透明空间,将其与其他元素分隔开。

边距位于块元素的外侧,而填充位于内侧。

使用边距将块与块外的东西分开使用填充将内容移离块的边缘。