为什么大多数框架在 p、h1、h2 等上使用边距而不是填充？ [关闭]答案

【问题标题】：Why do most frameworks use margin and not padding on p, h1, h2 etc.? [closed]为什么大多数框架在 p、h1、h2 等上使用边距而不是填充？ [关闭]
【发布时间】：2016-09-16 01:36:54
【问题描述】：

使用填充有什么缺点吗？或者为什么每个人似乎都选择保证金？

【问题讨论】：

margin 可以防止元素相互粘连，这是 padding 无法做到的。
这取决于你想要的空间。外部空间，用户边距，内部空间，使用填充。很简单。
欢迎来到 Stack Overflow！这个问题要么过于宽泛，要么基于意见，要么需要讨论，因此对于 Stack Overflow 来说是题外话。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
因为我认为它是基于意见的，并且根据具体情况，我尝试更多地指定我的问题：为什么我测试的引导程序和大多数网站在 p-tags 上使用边距而不是填充？

标签： css twitter-bootstrap frameworks

【解决方案1】：

两者都没有缺点，因为padding 和margin 是两个不同的东西，它们用于实现不同的效果。如果没有background，这些规则在视觉上可能看起来是一样的，但每个规则都在不同的地方添加了间距。

填充

Padding 在元素内部添加间距 - 在元素的边框和它的内容之间。使用它是为了使element 的content 不会紧挨着元素的边缘（或其border）。

保证金

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

其他区别：

Margin-top 和 margin-bottom 将始终崩溃，即margin-top:15px 和 maragin-bottom:10px 的两个元素彼此之间的距离为 15px。 padding 规则不关心其他元素的padding 是什么并且永远不会崩溃。
Margins 也可用于通过使用负值使元素重叠。否定的padding 无效，不会做任何事情。
Margin 始终透明，不能有background。但是，background 是在 padding 上绘制的（除非您使用 background-origin: content-box 规则，它只在元素内容内绘制背景）。
Margin 可用于在 margin-left 和 margin-right 上使用值 auto 将元素居中。 Padding 不能是 auto。

运行下面的 sn-p 来查看作用的不同：

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

.padding{
  padding: 10px;  
}

.margin{
  margin: 10px;  
}

<h3>None</h3>
<div>content</div>
<div>content</div>
<div>content</div>

<h3>padding:10px;</h3>
<div class="padding">content</div>
<div class="padding">content</div>
<div class="padding">content</div>

<h3>margin:10px;</h3>
<div class="margin">content</div>
<div class="margin">content</div>
<div class="margin">content</div>

<h3>margin:10px; and padding:10px;</h3>
<div class="padding margin">content</div>
<div class="padding margin">content</div>
<div class="padding margin">content</div>

【讨论】：

谢谢。我发现对我来说主要的区别是在某些情况下边距确实会塌陷而填充不会。我认为对于某些 p-tags，如果它们之间的空格确实塌陷，那么你的文本中不会有太大的空白。
也许我没有说清楚。不要使用padding 在元素之间放置空间。我改进了我的答案，以包括这两条规则的其他差异。
谢谢，我的问题就这样回答了。

【解决方案2】：

加上上面的例子，还有一个区别。在某些情况下，边距可能会塌陷，而填充则不会。因此，即使没有背景颜色，它看起来也会有所不同，因为两个同类元素之间的总空间可能不同。

example

【讨论】：

margin-top 和 margin-bottom 每次都崩溃，而不是在“某些情况下”。