CODEWITHSUNDEEP
htmlcss
Nick Grealy
Nick Grealy

Reputation: 25912

How do I remove the font gap?

I have the follow CSS code, which results in a 12px gap above the text, and a 15px gap below the text.

I've tried setting padding and margin to 0px, and also setting line-height.

How can I make my text fit the div (with no gap)?

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding:0 !important;
  margin:0 !important;
}
<div>THIS IS A TEST</div>

Upvotes: 2

Views: 305

Answers (4)

Tyler Roper
Tyler Roper

Reputation: 21672

If you highlight your text, you'll notice that the vertical padding is actually part of the font.

One solution would be to specify a line-height. (I've also included padding-top to offset the font's uneven vertical padding.)

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding:0;
  margin: 0;

  line-height: 0.73em;
  padding-top: 0.03em;
}
<div>THIS IS A TEST</div>

Upvotes: 3

Ahil Rahesh
Ahil Rahesh

Reputation: 83

Use .test{ line-height: 0px; } for removing line to line gap.

Use .test{ word-spacing: 0px;} for removing word to word gap

and use .test{ letter-spacing: 0px; } for removing letter to letter gap

Upvotes: 0

You Old Fool
You Old Fool

Reputation: 22950

You can get rid of that gap using line-height as mentioned above, but it's important to realize that it's required in order to render many other characters that extend above or below the ones in your snippet. If you remove it, this may result in rendering issues depending on the text content of your div:

For example, this:

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding:0 !important;
  margin:0 !important;
}
<div>TEST yqj ÑÜ</div>

Ends up like this:

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding: 0;
  margin: 0;
  padding-top: 0.023em;
  line-height: 0.73em;
}
<div>TEST yqj ÑÜ</div>

Upvotes: 1

Revz
Revz

Reputation: 23

Line height is the best option.

use line-height:40px;

.divclass {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  line-height: 40px;
}
<div class="divclass">THIS IS A TEST</div>

}

adjust line height to achieve desired output.

Upvotes: 0

Related Questions