html - H1标签前后的额外空间

Question

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

see code pen

添加

 line-height:0.7em;

规则大致解决了问题，但是

1. 看起来不干净
2. 仍然有一些不需要的像素
3. 不确定这是否会导致不同字体大小或单位的问题。

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

HTML:

<h1>Some text</h1> 

CSS

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

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