html - Why some characters overflow a line despite using font-size == line-height? -
<div style="height:40px; line-height:40px; width:40px; font-size: 40px; font-family: sans-serif; background-color:rgb(220,220,220)"> ⇪ <div>
running snippet on chrome, macos sierra, displays:
notice arrow overflows div. thought never happen. why?
because font-size not define height of glyph, height of em-square. normal in fonts glyphs taller em-square.
every font has em-square size , ascent , descent. glyph typically fit between distance top of ascent , bottom of descent, distance larger em-square size.
Comments
Post a Comment