在编写CSS时,是否有一个特定的规则或指南应该用于决定何时使用margin以及何时使用padding ?
#1楼
MARGIN vs PADDING :
边距用于在元素中创建该元素与页面的其他元素之间的距离。 其中padding用于创建元素的内容和边框之间的距离。
边距不是元素的一部分,其中填充是元素的一部分。
请参阅下面从Margin Vs Padding - CSS Properties中提取的图像
#2楼
对于您的问题有更多的技术解释,但如果您正在寻找一种方法来考虑边距和填充,这将有助于您选择何时以及如何使用它们,这可能会有所帮助。
将块元素与挂在墙上的图片进行比较:
- 浏览器窗口就像墙一样。
- 内容就像一张照片。
- 边距就像框架图片之间的墙壁空间。
- 填充就像照片周围的垫子一样。
- 边框就像一个框架上的边框。
在边距和填充之间进行选择时,当你将一个元素与墙上的其他东西间隔开时,使用边距是一个很好的经验法则,当你调整元素本身的外观时,使用填充 。 边距不会改变元素的大小,但填充通常会使元素变大1 。
1可以使用box-sizing属性更改此默认框模型。
#3楼
边距位于块元素的外侧,而填充位于内部。
- 使用margin将块与其外部的东西分开
- 使用填充将内容移离块的边缘。
#4楼
有一点需要注意的是,当自动折叠边距会让你烦恼(并且你没有在元素上使用背景颜色)时,更容易使用填充。
#5楼
关于边距的事情是你不需要担心元素的宽度。
就像当你给出{padding: 10px;}东西时,你必须将元素的宽度减少20px以保持“ 适合 ”而不会打扰周围的其他元素。
因此,我通常首先使用填充来使所有内容“ packed ”,然后使用边距进行小调整。
需要注意的另一件事是填充在不同的浏览器上更加一致,IE不能很好地处理负边距。