设置文本格式时应该使用边距还是填充？

Question

我正在为我的网站设计一些 CSS。我需要格式化（在标题和段落之间添加一些适当的间距）一段统一文本，其中标题和段落位于单个背景上。margin这可以使用或属性来完成padding。我确实理解这两者在 CSS 中的区别。另外，关于这些 CSS 属性的使用，还有很多问题：

• 边距和填充之间的区别？
• 何时在 CSS 中使用边距与填充
• 建议使用什么边距或填充？

然而，毫无疑问应该使用什么属性来进行正确的文本格式设置。假设我需要像这样设置文本格式：

我应该使用margin或padding控制文本元素（标题和段落）之间的间距吗？<p>建议在和标签上使用什么<h..>？常见的做法是什么？

这是我现在想到的：

/* tiny reset */
html { font-size: 10px; }
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  line-height: 2.5rem;
  margin: 0.6rem 0 2.0rem 0;
  padding: 0 2px 4px 2px;
  width: 100%; /* Opera needs this */
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 0 2px 4px 2px;
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: 4.0rem;
  line-height: 4.0rem;
  margin: 2.6rem 0 2.0rem 0;
}
h2 {
  font-size: 3.2rem;
  line-height: 3.2rem;
  margin: 2.4rem 0 2.0rem 0;
}

.wrap {
  margin: 20px;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
}

<div class="wrap">
  <p>The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.</p>

  <h2><strong>CSS statements</strong></h2>
  <p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
  <p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.</p>
  
</div> <!-- /wrap -->

Answer 1

line-height 用于控制段落行之间的间距。通常，边距用于仅包含文本的元素之间。这与印刷中使用的标准排版没有太大不同。

因此，您可以设置标题的行高，然后通过边距控制标题下方的空间大小。就像您对任何其他组件所做的那样。段落之间的空间是边距。但是，段落中各行之间的间距是通过行高来控制的。

所有这些也可用于在页面上设置垂直节奏。你应该谷歌一下。

一个很好的参考是The Elements of Typography Style Applied to the Web