Css remove empty space in h tags

Question

Is any way to remove empty space in top of the h tags?

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: normal;
}

<h1>Test Title yg</h1>

Answer 1

You should be looking for :

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: 1.4rem;
  padding-bottom: 8px;
}

<h1>Test Title yg</h1>

Hope this is what you are looking for!
But this space is needed for HTML special characters.
Please have a look at HTML characters here

Answer 2

You can use line-height: calc(1em + 2px); to remove some space, but there is a reason why the space is available. On the bottom of "g" and "y" there is some space to the border. With the line-height: calc(1em + 2px); you can remove this space but not the space above "T". There can be characters like ÄÖÜ (in german) who need some space above and characters like gyq who need some space below.

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: calc(1em + 2px);
}

<h1>Test Title yg</h1>

Answer 3

The Top and Bottom space it's actually come from font-family, but you can remove top space by change line-height: normal; to line-height: 1.4rem;. I hope it'll work for you. Thanks

h1 {
  border: 1px solid;
  margin: 0;
  padding: 0;
  line-height: 1.4rem;
}
<h1>Test Title yg</h1>

Answer 4

The space above the text depends on the type of font and the size of the font you are using. When using large font size, it's bound to show some extra space at the top and bottom of the text. You can set the margin-top of h1 tags to -10px or something to adjust for this issue.