Question

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

但是，毫无疑问，应该使用什么属性进行正确的文本格式化。让我们说我需要像这样格式化文本：

我应该使用margin还是padding来控制文本元素（标题和段落）之间的间距？建议在<p>和<h..>代码上使用哪些内容？通常的做法是什么？

以下是我现在提出的建议：

＆＃13;

/* 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);
}

＆＃13;

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

＆＃13;

Answer 1

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

因此，您可以设置标题的行高，然后使用边距控制下面的空间大小。就像你对任何其他组件一样。段落之间的空格是保证金。但是，段落各行之间的空间由行高控制。

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

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

Answer 2

我缩小了这种情况：我需要在一个背景上格式化带有标题和段落的统一文本部分。

对于容器元素边框和文本内容之间的空格，您可能希望在该容器元素上使用填充。当然，您也可以在内部段落和标题元素上使用边距 - 但这将是您必须以这种方式格式化的两种不同类型的元素。那么，在一个元素上设置一次填充，或者边缘一个多元素 - 这看起来更有效，并且可能更容易维护？

至于段落和标题之间的间距 - 这里你可能想要使用边距，因为边距可以collapse。

假设你有

h2 { margin-top: 15px; margin-bottom: 30px; }
p  { margin-top: 10px; margin-bottom: 10px; }

（h2具有更大的字体大小，因此通常从排版的角度来看，它应该与前面/后面的内容保持更多距离，例如两个段落元素直接相互跟随。）< / p>

现在标题后跟HTML中的一个段落，边缘折叠，标题的30px底部边距和段落的10px上边距仍会导致这些元素之间的总距离为30px - 而具有相同值的填充很容易加起来，你可以在这两个元素之间获得40px的距离。

Answer 3

我认为这不是黑白问题。虽然我是填充物的忠实粉丝。你应该真正使用你认为最好的东西。

对于我来说，填充用于间隔里面的和余量来区分外部。有时填充可能会导致盒子模型尺寸出现问题，有时可能会与背景图像冲突。另一方面，边距可能会破坏布局并可能崩溃。

所以你真的需要了解每个属性如何影响盒子模型和流程，并使用你喜欢的任何一个。另外值得注意的是，保证金接受负值，而填充则不接受。

如果您想添加不影响布局流程的空间，可以求助于定位。

格式化文本时，我应该使用边距还是填充？

3 个答案: