CODEWITHSUNDEEP
htmlcsstextcontainersfont-size
Merc
Merc

Reputation: 4570

Font is bigger than 'element' around it

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

Upvotes: 2

Views: 3783

Answers (2)

Patt Mehta
Patt Mehta

Reputation: 4204

This indirectly/directly influences your answer:

  <style>
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
    li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
      margin:0;
      padding:0;
      border:0;
      font-size:100%;
      font:inherit;
      vertical-align:baseline;
    }
  </style>

So, make sure that you atleast have the above lines of code whenever you work with css.

Upvotes: 0

Ghassan Elias
Ghassan Elias

Reputation: 2233

try to reduce line-height:

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

Upvotes: 5

Related Questions