Thorben Croisé
Thorben Croisé

Reputation: 12870

Why use something like "width: 22ex" in CSS?

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?

Upvotes: 0

Views: 127

Answers (3)

Damien_The_Unbeliever
Damien_The_Unbeliever

Reputation: 239674

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.

Upvotes: 2

Pete Wilson
Pete Wilson

Reputation: 8694

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.

Upvotes: -1

Andrei Bârsan
Andrei Bârsan

Reputation: 3523

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. :)

Upvotes: 0

Related Questions