Em understanding, em understanding

Em understanding, em understanding
Em

• Version: CSS1

Note: Your understanding: Note:

• The default browser size is 16px.

• The smallest font of Google Chrome is 12px.

• Font-size; inherited.

Judgment steps: [] Check whether the font size of the element is set: Yes: So, Boder, width, height, padding, margin, line-height" , Are relative to the font size. Font-size * em value = equals to the actual value.     

1. (Konjac example:
2. <H1> sky
3. H1 {font-size: 10px; margin: 2em;} // The value of margin is 20px;
4. )

• If the font size of the text in the row is not set manually, the default font size is relative to that of the browser. (Note that some labels come with font-size, such as h1 ~ H6)

[] If it comes with font-size. The calculation is required twice.

1. body {font-size:10px;}
2. H1 {margin: 2em;} // In this case, the font-size of h1 is 2em. Calculated as the font-size * 2em of the body. Then calculated as font-size: 20px. Margin calculates 20px * 2em = 40px again. In this case, margin: 40px;

[] No settings. Check the parent element.

1. body {font-size:20px;}
2. P {margin: 3em;} // at this time, because the smallest font is 12px. Then 20px * 3em = 60px;

If the text size is not set (manually set), it is the font size relative to the body. Therefore, font-size: 2em. It is 32px.

1.  body {font-size:20px;}
2.     .bo {font-size:2em;color:red;}
3. P {line-height: 3em;} // the line-height is 120px.

Compatibility:

• Light Green = supported
• Red = not supported
• Pink = partially supported

IE	Firefox	Chrome	Safari	Opera	IOS Safari	Android Browser	Android Chrome
6.0 +	2.0 +	4.0 +	3.1 +	3.5 +	3.2 +	2.1 +	18.0 +