0

I have a simple div and I would like to have a div height as its content font-size. So I tried to set height, line-height and font-size to the same value but it seems the element height is not expected 150px. You can seen it on the screen below. It is the header in red frame.

enter image description here

How to achieve to have font as height as its box height is?

Čamo
  • 3,863
  • 13
  • 62
  • 114

2 Answers2

1

So the problem is that the fonts always include some whitespace above and below. This is based on the font and not specified somewhere. So you're best bet would be to use the right fontsize, and then adjust the lineheight smaller till you get the desired result.

An answer to the same question you can get here

A little hack to remove the top and bottom space is here

Stefan F.
  • 608
  • 7
  • 15
  • So font-size is specific for every font-family and it does not match value of css. Ok thanks. – Čamo Feb 11 '20 at 09:27
-1

you can try the following solution with CSS.

  • 100px is your desired height
  • 1.45 must be corrected for every fontfamily.

HTML:

  <div class="container">   
      Stackoverflow  
  </div>

CSS:

.container {
  display: flex;
  align-items: center;
  background-color: #222222;
  color: #f7f7f7;
  text-transform: uppercase;
  height: 100px;  
  font-size: calc(100px * 1.45);  
}

Test link: https://codepen.io/shervinmr/pen/wvaaEvg

Shervin Mirostovar
  • 9
  • 4