Question

I experienced, that if I set a specific p tags font-size to let’s say 55px the actual element which contains the font is smaller than the font itself.

Therefor the font is overlapping the elements above.
Of course I can set some padding there, but why is the – i call it ‘imaginary’ object, because it’s just made by my browser – not getting the same size as the content – in this case the font?
By the way, this ‘imaginary’ container has always the same height. does not matter if the p-text has a size of 12px or 55px. In my case this height is always 15px…

thanks for hints about this matter.

cheers

Answer 1

try to reduce line-height:

.imaginary {
    font-size: 18px;
    line-height: 18px;
}