CSS中`margin`和`padding`有什么不同？

33 浏览
0 Comments

CSS中`margin`和`padding`有什么不同？

在CSS中，margin和padding有什么区别？在什么情况下：

  • 二者都适用。
  • 只有margin适用。
  • 只有padding适用。
admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

边距(Margin)位于块级元素的外部，而内边距(padding)则位于内部。

  • 使用边距(Margin)将块级元素与周围的元素分开。
  • 使用内边距(padding)将内容从块的边缘移开。

enter image description here

0
0 Comments

TL;DR：默认情况下，我使用的是边距(margin)，除非我有边框或背景并希望增加可见框内部的间距。

对我来说，填充(padding)和边距(margin)之间最大的区别是，在垂直方向上，边距会自动折叠，而填充不会。

考虑两个元素，一个在另一个上面，每个元素都具有1em的填充。这个填充被认为是元素的一部分，总是被保留。

因此，您最终会得到第一个元素的内容，接着是第一个元素的填充，然后是第二个元素的填充，最后是第二个元素的内容。

因此，这两个元素的内容最终相距2em。

现在用1em的边距(margin)替换掉那个填充。边距被认为是元素的外部，相邻项的边距会重叠。

因此，在这个例子中，您最终会得到第一个元素的内容，接着是1em的组合边距，然后是第二个元素的内容。因此，这两个元素的内容仅相距1em。

当你知道你想在元素周围留出1em的间距时，这非常有用，不管它旁边的是什么元素。

另外两个重要的差异是填充(padding)包含在单击区域和背景颜色/图像中，但边距(margin)不包含。

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; }


Default

  A
  B
  C

padding-top: 20px

  A
  B
  C

margin-top: 20px; 

  A
  B
  C

0