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:

enter image description here

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

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -