Can someone explain what an "em" (CSS unit of measure) is?

Question

Can someone explain that em is a CSS dimensional unit?

And when we use em as the unit of size for the website, why use% for the body? Why not use them for the body?

Answer 1

The best way to find out what it is is to look at the CSS standard .

Here you can see that it is defined as the font size for the element in question, i.e. it is related to the font height for the element. Font size is not a measurement of any particular letter. The actual height of individual letters may be larger or smaller than the font size, although they will usually be smaller. From Wikipedia :

In the digital type, the ratio of the height of individual letters to em is arbitrarily set by the font designer. However, as a very rough guideline, the “medium” font may have a header height of 70% of em, and x-height - 48% of em.

Another thing to note in the CSS standard:

The only exception to this rule is the "font-size" property, where the "em" and "ex" values ​​refer to the font size of the parent element.

This exception makes sense, otherwise you get a recursive definition of the font size.

A commonly used but incorrect definition is that it is the width of the letter "M". This was previously defined in typography, but these days it is no longer the case, and CSS has never been right. "M" is actually often less wide than 1 em (this, of course, depends on the font).

Answer 2

EDIT: I am correcting myself: in CSS, it is defined as the font size according to Mark Bayer's answer.

(This was originally the width of the letter M. See http://en.wikipedia.org/wiki/Em_%28typography%29 . Compare ex, which is the height of x.)

Answer 3

It is assumed that em em denotes 1 letter M, but in practice this is the current font size.

Ems are relative, so if you do:

table { font-size: 2em } td { font-size: 2em } 

The text in your td will be four times the size of the main text, since the font size of the table is twice as large as the body size, and the font size td is twice as large.

 p { margin-bottom: 1em } 

Paragraphs will now have one line break below them, exactly the height of one line of text. (The letters will usually be shorter than the string, but you get this idea.)

Answer 4

'Em' is "x times the current font that the user agent uses."

This means that if a visitor uses the default 10pt font, 1em is 10pt, 2em is 20pt, etc.

Here you can find additional information for different CSS nodes: http://www.w3schools.com/css/css_units.asp

Answer 5

You already have some understanding of "em" from existing answers, but none of them have noticed anything yet.

With em, you can create so-called “elastic” makeup. This means that if you specify all the block sizes in em, your site will retain its proportions after the user presses "Ctrl +" (or, possibly, another combination in some browsers to increase the font size).

Answer 6

From Wikipedia :

Em is the unit of measurement in the printing industry. This block determines the fraction of the width and height of the letter relative to the point size of the current font. The unit was originally derived from the capital width "M" in a specific font. This block is not defined in terms of any particular font and, therefore, for all fonts at a given size. So, 1 em in a 16-point font is 16 points.

Answer 7

In CSS, “em” is a way to express size relative to font size. "1 em" means "the same size as the current font." "1.5 em" means that the size of the element is about 1-1 / 2 times the font size.

Everything scales perfectly this way.

See: CSS Length Unit Reference