0

When reading this question, i was wondering why anybody uses ex as a measurement for the width of an element. I understand that ex represents the height of a lowercase x, so i can use it to define the height of a input-box - for example.

But why would anybody use ex for the width of this box? Isn't that possibly wrong depending on the type? And why shouldn't I just use em in this case?

Community
  • 1
  • 1
Thorben Croisé
  • 12,407
  • 8
  • 39
  • 50

3 Answers3

2

The height and width of elements are usually best specified considering both at the same time, to achieve "pleasing" ratios (e.g. 16:9, or the golden ratio). So just because ex is specified in terms of a height, it doesn't make it less useful for specifying a particular width.

And you shouldn't use em instead, since it's the width of the upper case M. It's highly unlikely that the two measurements are the same.


As a corollary, you'll find plenty of example layouts that specify heights in terms on ems, which is again because they're considering the ratios between heights and widths.

Damien_The_Unbeliever
  • 234,701
  • 27
  • 340
  • 448
  • I am not completely happy with the answer. Of course, if I want the height in relation to the width it would make sense, but I highly doubt that if you want to specify the width of an input-box you are going for "pleasing" ratios. Do you see any reason why anybody should use it in this case? – Thorben Croisé Dec 13 '11 at 10:21
  • 1
    @Tobo - I agree it's odd if it's the only use of `ex` in the entire (set of) stylesheet(s), but if the entire layout is being constructed in terms of `ex`, then no, I don't think it's odd. (Added to which, assuming a non-fixed-width font, using any font-metric to set the width of the box can't be to limit the number of characters displayed) – Damien_The_Unbeliever Dec 13 '11 at 10:31
  • em is defined as the the *height* of an upper-case M, not the width. – JacquesB May 09 '15 at 11:08
0

Since ex refers to height, rather than width, using it to set a width seems to be simply an error, imho. You should just use em to make the width relative to the text's width.

Hope this helps. :)

Andrei Bârsan
  • 3,473
  • 2
  • 22
  • 46
  • Both em and ex refers to height. em is the height of an upper-case M, ex is the height of a lower-case x. – JacquesB May 09 '15 at 11:06
-1

What @Andrei Bârsan said and, further, because few characters are as wide as 'em', you can use 'en' as a width specifier. 'en' will give you the width of any digit.

Pete Wilson
  • 8,610
  • 6
  • 39
  • 51