CSS: em or ex for number width? [closed]

StackOverflow https://stackoverflow.com/questions/23078029

  •  03-07-2023
  •  | 
  •  

Question

I have to set the width of an input field such as it fits 2 numbers (e.g. from 00 to 99). I tried width:2em but it is too large, `width:2ex' and it is too small...

Which unit is best to use? Is there any standard practice?

EDIT

I know that proportional fonts make width calculation difficult, but usually numbers have fixed width to allow alignment of digits. So I figured out there were some unit to deal with them...

e.g. the following 10-digits random sequences (in proportional font) have the same width...

1234567890

3421434234

2324235252

Was it helpful?

Solution

One em is the maximum character-width of the current font (the width of an upper-case M). One ex is about half the height of the current font (the height of the lower-case x).

Sadly, if you aren't using a monospaced font (one where all the letters take up the same amount of horizontal space, such as Courier), the width of a certain combination of letters will not be the same as every other combination of as many letters.

Example:

Stack Overflow does not use a monospaced font for its comments, hence these following lines are of different width, though containing the same amount of letters:

iiiiiiiii
MMMMMMMMM

However, if I write in a monospaced font, they do occupy the same horizontal width:

iiiiiiiii
MMMMMMMMM
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top