为什么大多数框架在p，h1，h2等上使用保证金而不是填充？

Question

使用填充是否有任何缺点？或者为什么每个人似乎都有保证金？

Answer 1

使用它们也没有任何缺点，因为padding和margin是两个不同的东西，它们用于实现不同的效果。没有background这些规则似乎在视觉上做同样的事情，但每个规则在不同的地方添加间距。

<强>填充

Padding在元素内添加间距 - 在元素的边框与其内容之间。它已被使用，因此content的{​​{1}}不会紧挨着元素的边缘（或其element）。

<强>保证金

border在元素本身之外添加间距。它指定元素与周围元素之间应该有多少空间。

其他差异：

• Margin和Margin-top将永远崩溃，I.E。 margin-bottom和margin-top:15px的两个元素之间的距离为maragin-bottom:10px。 15px规则并不关心padding其他元素是什么，永远不会崩溃。

• padding也可用于通过负值使元素重叠。否定Margins无效并且无法做任何事情。

• padding始终透明且无法Margin。但是，background会在background上绘制（除非您使用padding规则，该规则仅在元素的内容中绘制背景）。

• background-origin: content-box可用于在Margin和auto上使用值margin-left来居中元素。 margin-right不能Padding。

运行下面的代码段以查看操作上的差异：

＆＃13;

＆＃13;

auto

＆＃13;

div{
  background: #B4D455;
  width: 100px;
}
div:nth-of-type(2n){
  background: #D4B055;  
}

.padding{
  padding: 10px;  
}

.margin{
  margin: 10px;  
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

从上面添加示例还有一个区别。在某些情况下，保证金可能会崩溃，而填充则不会。所以即使没有背景颜色它也会看起来不同，因为同一类型的两个元素之间的总空间可能不同。

example