何时在CSS中使用margin和padding [关闭]

一个人想着一个人 提交于 2019-12-06 10:27:29

在编写CSS时,是否有一个特定的规则或指南应该用于决定何时使用margin以及何时使用padding


#1楼

MARGIN vs PADDING

  1. 边距用于在元素中创建该元素与页面的其他元素之间的距离。 其中padding用于创建元素的内容和边框之间的距离。

  2. 边距不是元素的一部分,其中填充是元素的一部分。

请参阅下面从Margin Vs Padding - CSS Properties中提取的图像


#2楼

对于您的问题有更多的技术解释,但如果您正在寻找一种方法来考虑边距和填充,这将有助于您选择何时以及如何使用它们,这可能会有所帮助。

将块元素与挂在墙上的图片进行比较:

  • 浏览器窗口就像墙一样。
  • 内容就像一张照片。
  • 边距就像框架图片之间的墙壁空间。
  • 填充就像照片周围的垫子一样。
  • 边框就像一个框架上的边框。

在边距和填充之间进行选择时,当你将一个元素与墙上的其他东西间隔开时,使用边距是一个很好的经验法则,当你调整元素本身的外观时,使用填充 。 边距不会改变元素的大小,但填充通常会使元素变大1

1可以使用box-sizing属性更改此默认框模型。


#3楼

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

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


#4楼

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


#5楼

关于边距的事情是你不需要担心元素的宽度。

就像当你给出{padding: 10px;}东西时,你必须将元素的宽度减少20px以保持“ 适合 ”而不会打扰周围的其他元素。

因此,我通常首先使用填充来使所有内容“ packed ”,然后使用边距进行小调整。

需要注意的另一件事是填充在不同的浏览器上更加一致,IE不能很好地处理负边距。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!