0

How can I remove whitespace from above and below the text in the div so that the text fits neatly inside the red box.

div {
  border: 2px solid red;
  padding-top: 0px;
  margin-top: 0px;
}
<div>LEX</div>
webta.st.ic
  • 4,781
  • 6
  • 48
  • 98
user740360
  • 57
  • 1
  • 1
  • 5
  • 5
    I'm not getting what you really try to achieve? The whitespace above and below the text seems to be a default whitespace depending on the line-height: https://codepen.io/STWebtastic/pen/NXKvMm If you play with the line-height it removes...Is this what you mean? – webta.st.ic Dec 11 '17 at 10:54
  • Thanks MrBuggy. I get your point but I need the text size to be variable and I set it using font-height: 24pt for example. I don't know how to specify a relative line-height without just using trial and error. – user740360 Dec 11 '17 at 11:01
  • Is the font-size variable depending on the screen size or something else? – webta.st.ic Dec 11 '17 at 11:02
  • Do not use 'pt' for screens. 'pt' is for print. – Rob Dec 11 '17 at 11:39
  • @Rob was a typo, I meaned px :) – webta.st.ic Dec 11 '17 at 12:36

1 Answers1

1

Try fiddling with line-height and em like so:

line-height: 1em;

This way, whatever your font-size is, the line-height will adjust automagically. 1em might be too much.. perhaps .667em is a better fit?

LGT
  • 4,957
  • 1
  • 21
  • 22
  • Didn't get this, very nice solution and seems to work with the right line-height in em: https://codepen.io/STWebtastic/pen/NXKvMm – webta.st.ic Dec 11 '17 at 11:13
  • 1
    The `em` unit is based on the font-size value of the current element. In this case, if the font-size is 24px, then the line-height will be .667 * 24px = 16px. https://developer.mozilla.org/en-US/docs/Web/CSS/length – LGT Dec 11 '17 at 11:20