Extra space before and after H1 tag

Question

Even after reseting margin and padding the h1 tag still has mysterious unwanted gaps before and after its content

see code pen

Adding

 line-height:0.7em;

rule approximately resolve the problem, however

1. it looks unclean
2. there are still few unwanted pixels
3. not sure that this will not cause issues with different font size or units.

Is there a clean and universal solution, maybe using sass/less mixin with math operations?

HTML:

<h1>Some text</h1> 

CSS

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

Answer 1

the h1 tag by default has line-heigth property you can adjust it like

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

updated example

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

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