标题 H1-H6 空格答案

【问题标题】：Headings H1-H6 whitespace标题 H1-H6 空格
【发布时间】：2017-03-14 03:47:58
【问题描述】：

有没有办法去除 h1-h6 标题上下的空格？边距和填充无效。

检查此codepen。

谢谢！

<div class="background">
  <h1>This is H1!</h1>
</div>

<div class="background">
  <h2>This is H2!</h2>
</div>

<div class="background">
  <h3>This is H3!</h3>
</div>

<div class="background">
  <h4>This is H4!</h4>
</div>

<div class="background">
  <h5>This is H5!</h5>
</div>

<div class="background">
  <h6>This is H6!</h6>
</div>

css 是

.background {
  background: orange;
  margin-bottom: 10px;
}
h1 {
  margin: 0;
  padding: 0;
}

【问题讨论】：

标签： heading

【解决方案1】：

这将隐藏白色

&lt;body style="background-color:orange;"&gt;

编辑凯文打败了我，他的更好。哈哈

【讨论】：

【解决方案2】：

您将标题分成多个部分！无论如何，当所有元素都将具有相同的样式时，不要使用“div”标签！

<div style = "background-color:yellow">
  <h1>This is H1!</h1>
  <h2>This is H2!</h2>
  <h3>This is H3!</h3>
  <h4>This is H4!</h4>
  <h5>This is H5!</h5>
  <h6>This is H6!</h6>
</div>

注意：标签中“背景颜色”的使用与代码中使用 css 相同。应该可以解决您的问题！

编辑：

由于一些混淆，上面的答案不是提问者的意思（见 cmets），所以这是我的新答案。

您的目标是无法完美地完成（根据我的经验），但如果您愿意的话；您可以使用框（图像）代替实际标题。

或者，使用

<div class="background">
   <h1 style = "transform : scale(1,1.65)">This is H1!</h1>
</div>

有点俗气，维护不好（如果字体变了，就不再完美贴合了）见：related

【讨论】：

没有。这不是我的本意。对不起.. 你看到背景橙色，里面有 h1-h6。实际内容 (h1) 和空格之间有空格，有点像填充（但不是）。
您是指实际的文本和背景颜色，而不是实际的“空白”空间吗？让字体与橙色完美契合？
是的！而已。我不希望我的 h1 有多余的空间，并且完全适合橙色背景，就像没有空间一样。
嗨，凯文！谢谢...我明白了...我想我可以删除它。谢谢
@Yortz 没问题，我就是这么做的！ ;)（不要忘记为未来的读者批准我的回答）