何时在CSS中使用页边距和填充空间

Question

何时在CSS中使用页边距和填充空间在编写css时，在决定何时使用时是否应该使用特定的规则或指南？margin以及何时使用padding?

Answer 1

 默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且希望增加该可见框中的空间。

对我来说，填充物和保证金最大的区别是垂直边缘自动崩溃，而填充没有。

考虑两个元素，一个高于另一个，每个元素都带有1em..这个填充被认为是元素的一部分，并且总是被保存下来。

因此，您将得到第一个元素的内容，然后是第二个元素的填充，然后是第二个元素的内容。

因此，这两个元素的内容最终将是2em分开。

现在用1em边距代替那个垫子。边距被认为在元素之外，相邻项的边距将重叠。

因此，在本例中，您将得到第一个元素的内容，后面跟着1em后面跟着第二个元素的内容。所以这两个元素的内容只是1em分开。

当你知道你想说1em一个元素周围的间距，而不管它旁边是哪个元素。

另外两大不同之处在于，点击区域和背景颜色/图像中包含了填充内容，而不包括页边距。

Answer 2

边距在块元素的外部，而填充在内部。

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

Answer 3

对于你的问题有更多的技术性解释，但是如果你在寻找一种方法想一想保证金&填充将帮助您选择何时以及如何使用它们，这可能会有所帮助。

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

• 这个

  浏览器窗口

  就像墙一样。
• 这个

  含量

  就像一张照片。
• 这个

  保证金

  就像相框间的墙壁空间。
• 这个

  填充物

  就像照片周围的垫子。
• 这个

  边界

  就像框架上的边框。

在决定保证金和垫料之间时，这是一个很好的经验法则保证金当你把一个元素与墙壁上的其他东西联系起来时，填充物当您调整元素本身的外观时。边距不会改变元素的大小，但是填充通常会使元素更大。¹.

¹ 属性可以更改此默认框模型。box-sizing属性.