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

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


当前回答

边距在框外,填充在框内

其他回答

边距在框外,填充在框内

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

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

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

对你的问题有更多的技术解释,但如果你想要一种方法来思考边距和填充,这个类比可能会有所帮助。

将块元素想象成挂在墙上的相框:

照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。

考虑到这一点,一个很好的经验法则是,当您希望将一个元素与墙上的其他元素隔开时,使用边距,当您调整元素本身的外观时,使用填充。边距不会改变元素的大小,但填充会使元素变大1。


1可以使用框大小属性更改此行为。

保证金与衬垫:

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

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