如何解决何时在 CSS 中使用边距与内边距
默认情况下,我在任何地方都使用边距,除非我有边框或背景并且想要增加可见框内的空间。
对我来说,填充和边距之间最大的区别是垂直边距会自动折叠,而填充不会。
考虑两个元素,一个在另一个之上,每个元素都有1em
. 此填充被认为是元素的一部分并且始终被保留。
所以你最终会得到第一个元素的内容,然后是第一个元素的填充,然后是第二个元素的填充,然后是第二个元素的内容。
因此,这两个元素的内容最终会2em
分开。
现在用 1em 边距替换该填充。边距被认为在元素之外,相邻项的边距会重叠。
所以在这个例子中,你最终会得到第一个元素的内容,然后1em
是组合边距,然后是第二个元素的内容。所以这两个元素的内容只是1em
分开的。
当您知道要说1em
元素周围的间距时,这将非常有用,而不管它旁边的元素是什么。
另外两个很大的区别是填充包含在点击区域和背景颜色/图像中,但不包含边距。
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
边距位于块元素的外部,而填充位于内部。
- 使用边距将块与其外部的东西分开
- 使用填充将内容从块的边缘移开。
解决方法
在编写 CSS 时,是否应该使用特定的规则或指南来决定何时使用margin以及何时使用padding?