CODEWITHSUNDEEP
htmlcsshtml-head
wpuzman
wpuzman

Reputation: 400

Css remove empty space in h tags

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>

enter image description here

Upvotes: 0

Views: 1019

Answers (4)

VikrantMore
VikrantMore

Reputation: 903

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

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

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>

Upvotes: 0

Safal Pillai
Safal Pillai

Reputation: 1637

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.

Upvotes: 1

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

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>

Upvotes: 0

Related Questions