Question

当我在浏览器中查看我的文档时，每行文本之间都有空白行，这使得它看起来像是双倍行距。我希望每行文本都直接位于其前面的文本下方，并且没有双倍间距的外观。我定义了CSS样式来做我想要的，但我觉得这个问题可能就在那里。 CSS表是外部的并且已导入。

h5 {
  font-weight: bold;
  text-align: center;
}
h6 {
  text-align: center;
}

<div class="leftHeader">
  <h5>First line of text</h5>
  <h6>Second line of text</h6>
  <h6>last line of text</h6>
</div>

Answer 1

可能有一些边距/填充默认开始。

＆＃13;

h5 {
  font-weight: bold;
}
h5,
h6 {
  text-align: center;
  padding: 0;
  margin: 0;
}

＆＃13;

<div class="leftHeader">
  <h5>First line of text</h5>
  <h6>Second line of text</h6>
  <h6>last line of text</h6>
</div>

＆＃13;

Answer 2

您将看到默认的用户代理（网络浏览器）样式。

标题元素以及其他元素将具有由用户代理应用于它们的默认边距和填充。由开发人员来重置/标准化/修改这些值。

您可以通过更改上/下边距来解决此问题。

.m0 {
  margin: 0;
}

<h2>Heading 2</h2>
<h3>Heading 3</h3>
<hr>
<h2 class="m0">Heading 2</h2>
<h3 class="m0">Heading 3</h3>

Answer 3

问题是h5和h6标签的顶部和底部都有标准边距。尝试将此添加到css

h5,
h6 {
    margin: 0;
}

＆＃13;

h5 {
  font-weight: bold;
  text-align: center;
  margin: 0;
}
h6 {
  text-align: center;
  margin: 0;
}

＆＃13;

<div class="leftHeader">
  <h5>First line of text</h5>
  <h6>Second line of text</h6>
  <h6>last line of text</h6>
</div>

＆＃13;