CODEWITHSUNDEEP
htmlcsshtml-table
Fabio
Fabio

Reputation: 19216

Why text with lower font size increase tr height

I'm having a strange issue, in this page there are two spans with different font-size.

Screenshot

The first span (with content "With empty title") has no explicit font size thus it inherits a font-size of 100%, in css inspector it becomes 12px. The second span with the word 'EMPTY', is initially hidden and is viewable by clicking on IT flag. It has this css applied

td {
  .empty {
    color: #bbb;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
  }
}

According to inspector, when "EMPTY" span is shown its computed size is 9px, however when the second span is shown there is a 1px flickering for the containing tr, on my browser tr height changes from 32px to 33px with the higher value when empty span is shown.

Why is this happening? How to prevent that without changing span.empty font-size?

Upvotes: 0

Views: 368

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

Span is an inline element and behave in the flow like letters or inline-boxes does.

It stands on the baseline, beneath the baseline , you have a gap that remains for letters such as : g,j,p,q,y,....

Letters and inline-boxes stands on baseline wich is the defaut vertical-align for any inline element. reset it to vertical-align:top or bottom and the gap will be part of area used.

If you reduce line-height, the baseline is reduced, and element 'too high' will be go over it.

Hope it's clear enough, do not hesitate to edit this post to turn it into proper english , thks (erasable line)

Upvotes: 1

Related Questions