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

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


当前回答

边距在框外,填充在框内

其他回答

边缘

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

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

衬料

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

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

了解边距和填充之间的区别很好。以下是一些区别:

边距是元素的外部空间,而填充是元素的内部空间。边距是元素边界外的空间,而填充是元素边界内的空间。Margin接受auto:bmargin:auto的值,但不能将padding设置为auto。提示:您可以使用此技巧使元素在其父对象内部居中(甚至垂直)。例如,请参见我的另一个答案。边距可以设置为任何数字,但填充必须为非负数。设置元素样式时,填充也会受到影响(例如背景色),但不会影响边距。

保证金与衬垫:

元素中使用边距来创建该元素和页面其他元素之间的距离。其中填充用于在元素的内容和边框之间创建距离。边距不是元素的一部分,而填充是元素的一。

请参阅下面从边距与填充-CSS财产中提取的图像

我总是使用这个原则:

这是Firefox中inspect元素特性的方框模型。它像洋葱一样工作:

你的内容在在中间。填充是指内容和标签边缘之间的空间在…内边界及其规格边距是标记周围的空格。

因此,更大的边距将在包含内容的框周围腾出更多空间。

较大的填充将增加内容和其所在的框之间的空间。

如果将框设置为特定值,则它们都不会增加或减小框的大小。

边距在框外,填充在框内