H1标签前后的额外空间答案

【问题标题】：Extra space before and after H1 tagH1标签前后的额外空间
【发布时间】：2016-06-23 13:59:17
【问题描述】：

即使在重置边距和填充后，h1 标签在其内容前后仍然有神秘的不需要的间隙

添加

 line-height:0.7em;

规则可以大致解决问题，但是

是否有一个干净且通用的解决方案，也许使用 sass/less mixin 和数学运算？

HTML：

<h1>Some text</h1>

CSS

* { margin:0;padding:0; }
h1 { font-size:25em; }

【问题讨论】：

标签： html css

【解决方案1】：

h1 标签默认有 line-heigth 属性，你可以像这样调整它

h1 {
font-size: 25em;
line-height: 0.7em;
}

更新示例

* {
  margin:0;
  padding:0;
}
h1 {
  font-size:25em;
  line-height:0.7em;
}

<h1>Some text</h1>
<p>lorem ispum</p>

【讨论】：

【解决方案2】：

由于h1 是块级元素，默认情况下它的两侧有空格。可以加display: inline去掉，但是会影响定位。

【讨论】：

【解决方案3】：

请确保您的 css 边距规则：0；填充：0；开启。让它！重要的只是为了测试。行高：1；应该解决问题（或行高：0）。您可以为 h1 元素设置高度

【讨论】：

【解决方案4】：

h1 {
      font-size:25em;
      background-color:pink;
      line-height:0.8;
    }

你可以做的就是添加行高

【讨论】：

【解决方案5】：

h1.demo {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 40px;
  font-size: 40px;
}

&lt;h1 class="demo"&gt;Some Text&lt;/h1&gt;

【讨论】：

【解决方案6】：

在我的情况下，我找到的解决方案是，我设置了一个全局 line-height 值，它与其他所有内容都混为一谈。甚至除此之外，我意识到就像边距和填充一样，元素甚至还有默认的行高值。

所以你可以做的一件事是，设置他们的 "line-height: normal" 或 "line-height: initial" 到单个元素，甚至只是全局（后者可能会产生更好的结果）。

如果这不起作用，只需手动输入任何似乎适合您的行高值，尽管这不是最佳解决方案。这通常意味着您在某处有一个 line-height 设置，该设置覆盖了其他元素的相同设置，或者只是弄乱了与它共享边框的其他附近元素的间距。

【讨论】：