Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?

I have been using CSS for a long time, but I have always used "px" to set the relevant attributes of Web elements and have never dared to use "em". The main reason is that I don’t know much about it. I only know a little bit about the concept. Some time ago, I was required to use “em” as the unit to set elements in a project, so I learned about “em” from scratch. Now that I have a little understanding, I have specially compiled a blog post to share with you today, hoping that it will be of some help to the boys.

This tutorial will walk you through how to use "em" to create a basic flexible layout, so you can learn how to calculate it? How to use "em" to elastically expand the layers? How do you expand content such as text and images? Let’s start today’s “em” journey with these questions.

What is elastic layout?

User text size and flexible layout

The default text size rendered by the user's browser is "16px". In other words, the default text size of the "body" in a web page is "16px" in the user's browser. Of course, if the user wants, he can change the font size setting. The user can change the browser's default font size through the UI control.

A key aspect of flexible design is that all elements on a web page use "em" unit values. "em" is a relative size. We can set it to 1em, 0.5em, 1.5em, etc. "em" can also be specified to three decimal places, such as "1.365em". The word “relative” means:

1. Relative calculations must have a reference, so relative here refers to the font-size relative to the element's parent element. For example, if you set the font size of a <div> to "16px", the descendant elements of this <div> will inherit its font size unless you explicitly set it again in its descendant elements. At this point, if you set the font size of its child element to "0.75em", then its font size will be calculated to be equivalent to "0.75 X 16px = 12px";

2. If the user changes the text size through the browser UI control, then our entire page will also be enlarged (or reduced), so that the entire page will not crash after the user changes the browser font (I think everyone has encountered this phenomenon. If you don’t believe it, try it in the projects you have made, you will find it terrifying).

You can check out this flexible layout example. At this time, if you use the browser's UI controls to change the text size or directly use "ctrl +" and "ctrl -", you will find that in this elastic layout example, when the browser changes the font size, the browser will enlarge or reduce it accordingly, and will not affect the layout of the entire page. Note: All HTML and CSS for this example will be used throughout this tutorial.

For other examples of flexible layouts, you can browse Dan Cederholm's Simplebites and change the text size to browse.

After experiencing it, do you feel that the elastic layout page is very flexible and as precise as "px"? Therefore, as long as we master the basic relationship between "font-size", "px" and "em", we can quickly use CSS to create precise layouts.

Elastigirl of CSS introduces EM

Elastigirl's "em" is extremely powerful and flexible, it doesn't matter what the font size is, whether it's 12px, 16, or 60, it can calculate its value.

em is actually a typesetting test unit, and there is a short story about its origin. I won’t tell you about this story because you are not here to listen to my story. I think most people would like to know more about it in CSS.

In CSS, an “em” is actually a vertical measurement. An em is equal to the vertical space required by a letter in any font, and has nothing to do with the horizontal space it occupies, so:

If the font size is 16px, then 1em = 16px.

getting Started

Before we start to understand the "em" in CSS, we need to know its default font size in the browser. As we did earlier, the default font size in all modern browsers is "16px". So the default settings in the browser will be:

1em = 16px

So, when a CSS selector is written, the browser has a default font size of "16px". At this point, the <body> in our web page inherits this "font-size:16px;", unless you explicitly set the "font-size" value of <body> in the CSS style to change its inherited value. This way, "1em = 16px", "0.5em = 8px", "10em = 160px", and so on. We can also use "em" to specify the size of any element.

Set the font-size of the Body

Many predecessors have come up with an experience from years of practice. They suggest that we set the font size required for the main text in <body>, or set it to "10px", which is equivalent to ("0.625em or 62.5%"), in order to facilitate the calculation of its child elements. Both are desirable. But we all know that the default font of <body> is "16px", and we also know that if we change its default value, we need to recalculate and readjust it to ensure that the flexible layout is not broken. So the perfect setup is:

body {font-size:1em;}

But under the unloved IE, "em" will have a problem. When adjusting the font size, it will also break our elastic layout, but fortunately, there is a way to solve it:

html {font-size: 100%;}

Formula conversion - PXtoEM

If you are creating a flexible layout for the first time, it is best to have a calculator nearby, because we will have to do a lot of calculations at the beginning, and it will put your mind at ease.

Pixels are too intimate for us, so we'll start there as well. First we need to calculate the ratio between 1px and em, and then we need to know the px value we need. From the previous introduction, we all know that 1em is always equal to the font size of the parent element, so we can calculate it with the following formula:

1 ÷ font-size of the parent element × pixel value to be converted = em value

You can refer to the following conversion table (values ​​when the body font is 16px)

Next, let’s look at a very simple example of “using CSS EM to create a 960px wide elastic layout”

<body>

<div id="container"> …</div>

</body>

Convert 960px to em

1 ÷ 16px × 960px = 60em

The prerequisite for this calculated value is "font-size:16px" of <body>.

html {font-size: 100%;}
body {
font-size: 1em;
}
#container {
width: 60em;
}

Through the above examples, I think everyone can understand it more vividly, because there are examples to consult. In fact, we can convert the above calculation formula to make your calculation more convenient:

Pixel value to be converted ÷ parent element's font-size = em value

Then our example "960px" above can be converted into "em" value like this

960px ÷ 16px = 60em

Above we have witnessed the calculation method of converting "px" to "em". Next, let's take a look at the elastic layout example shown above. Next, we will implement it step by step.

Building a resilient container

To create a centering effect like the elastic layout example, we first need to create an HTML structure. I will create a <div> and name it "wrap"

<body>
<div id="wrap"> content here</div>
</body>

We want this container to be 740px wide, suitable for an instance of a 800px × 600px display. So how many "em"s would "740px" equal? This is what we need to care about. Let’s take a look together:

1. Convert "740px" to "em" and set it to our container "div#wrap": We all know that the parent element <body> of "div#wrap" sets the font to "16px". At this time, if no other display settings are made, its child element <div id="wrap"> will inherit the "font-size" value, so we can easily get: "the relationship between 1px and 1em"

1em = 16px, that is, 1px = 1 ÷ 16 = 0.0625em

In this way, our "740px" can be easily converted into "em"

0.0625em × 740 = 46.25em

Of course, you can also convert according to the calculation formula we listed above, so that you have a better concept in mind and it is not easy to make mistakes:

1 ÷ 16 × 740 = 46.25em (1 ÷ parent element's font-size × pixel value to be converted = em value)

This way, you can use the formula above to calculate the "em" value for any width or height you need. All you need to know is "1px equals how many ems" and the "px" value you want to convert. With these parameters, you can get the "em" value you want.

2. Create CSS styles: Now we can write styles for "div#wrap". The elastic layout sample clearly tells us that we set a width of "740px" for "div#wrap" to be centered, with upper and lower "margins" of "24px", and a "1px" border effect. So we first calculate the corresponding "em value" according to the above formula, and then write it in the CSS style:

html {font-size: 100%;}
body {font-size: 1em;}
#wrap {
width: 46.25em;/*740px ÷ 16 = 46.25em */
margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/
border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/
}

Now we can easily create a flexible container with content: Flexible layout example.

Text styles and ems

First we insert an <h1> and a <p> into the <div id="wrap"></div> we created earlier:

<div id="wrap">
<h1>...</h1>
<p>...</p>
</div>

In the flexible layout sample example, we used "18px" for the title, and the paragraph was set to a "12px" font, and its line height was "18px". 18px will be an important value for us to achieve flexible layout, and we can use them to change proportionally. (For an introduction to the typography of titles and paragraphs, if you are interested, you can click on Richard Rutter’s basic leading and vertical rhythm and chapter on vertical motion).

According to CSS inheritance, we did not explicitly set the font size in the content container of "div#wrap", so the entire "div#wrap" will inherit the font size of its parent element "body" - "16px".

1. Set the paragraph style: - "12px" font, "18px" line height and margin value

From CSS inheritance, we can know that all our paragraphs inherit the "font-size:16px" of its parent element "div#wrap". At the same time, we know from the previous introduction that 1px = 1 ÷ 16 = 0.0625em, so we can easily know how many "em" is equal to "12px"

0.0625em × 12 = 0.750em

So we can set the style for paragraph p:

p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}

To calculate the required line height and "margin" of "18px" for a paragraph to satisfy Richard Rutter's basic leading, we need to do the following:

18 ÷ 12 = 1.5em

Simply divide the desired line-height value of "18px" by the "font-size 12px" to get the "line-height" value for paragraph "p". In this example, the line height is equal to "1.5" times the font. Then we add the "line-height" and "margin" styles to the paragraph "p"

p{
font-size: 0.75em;/*0.625em × 12 = 0.750em */
line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */
margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */
}

2. Set a font size of 18px for the title

The title "h1" is the same as the paragraph "p". It also inherits the "font-size" of "16px" of its parent element "div#wrap", so we can calculate its "em" in the same way.

0.0625em × 18 = 1.125em

We can write the resulting value into the CSS style sheet

h1 {
font-size: 1.125em;/*0.625em × 18 = 1.125em*/
}

Also in order to preserve the vertical rhythm mentioned by Richard Rutter, we also set the "line-height" and "margin" of the title "h1" to "18px" using the method described earlier. It's easy to get their "em" value to be "1em":

h1 {
font-size: 1.125em; /*0.625em × 18 = 1.125em*/
line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */
margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */
}

Setting image size — using em

To achieve the same result as the elastic layout example, we also need to insert an image into the HTML:

<body>
<div id="wrap">
	<h1>....</h1>
	<p><img src="90.png" alt="" /> Lorem...</p>
</div>
</body>

Our image has a width and height of "90px", a right margin and a bottom margin of "18px", and is also floated left. Let's take a look at how to achieve these style effects of pictures:

From the HTML structure, we know clearly that the image is a child element of the paragraph "p". From the previous introduction, you know that the "font-size" value of this paragraph "p" is defined as "12px". Therefore, when we calculate the attribute value of the image, we cannot calculate it according to "1px = 0.0625em" or "1em=16px". We need to use the oldest formula:

1 ÷ font-size of the parent element × pixel value to be converted = em value

In this way, according to the formula shown above, we can calculate the size of the image:

1 ÷ 12 × 90 = 7.5em

Now you can write the calculated value into your stylesheet:

p img {
width: 7.5em; /*1 ÷ 12 (parent element's font-size) × 90px (image width) = 7.5em */
height: 7.5em; /*1 ÷ 12 (parent element's font-size) × 90px (image height) = 7.5em */
}

We know that "18px" is exactly "1.5em" in the paragraph, and now we also use it in the image style:

p img {
width: 7.5em; /*1 ÷ 12 (parent element's font-size) × 90px (image width) = 7.5em */
height: 7.5em; /*1 ÷ 12 (parent element's font-size) × 90px (image height) = 7.5em */
margin: 0 1.5em 1.5em 0;
float: left;
}
		

In this way, we can create an effect similar to the elastic layout example. I hope this example can help you understand how to use "em" to create a flexible layout. Of course, you may still be worried that using "em" to create a flexible layout cannot be as precise as "px". If you truly understand this tutorial, I think you will no longer have such an idea.

Formula summary of elastic layout

Finally, I think everyone will have the same idea as me, that is, how to successfully and correctly convert the "px" value of the relevant parameter into the "em" value. After the above study, I finally summarized the formula:

When the element itself does not set the font size, the element's width, height, line-height, margin, padding, border and other values ​​are converted according to the following formula:

1 ÷ font-size of the parent element × pixel value to be converted = em value

Let's look at an example:

<body>
<div id="wrapper">test</div>
</body>

The default font size in the body is "16px", so the relevant parameter values ​​of "div#wrapper" are:

#wrapper {
width: 200px;
height: 100px;
border: 5px solid red;
margin: 15px;
padding: 10px;
line-height: 18px;
}

Then we convert the parameters according to the above formula:

#wrapper {
width: 12.5em;/*1 ÷ 16 × 200 = 12.5em value*/
height: 6.25em;/*1 ÷ 16 × 100 = 6.25em value*/
border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em value*/
margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em value*/
padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em value*/
line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em value*/
}

Let's look at the calculated values:

Next, I need you to look at an effect. This is very important. Look carefully. On the basis of the same parameters, add a little element to set the font size to: 14px; You may say it is very simple. Just calculate it according to the previous formula and add it. Then I will calculate and add it according to what you said:

#wrapper {
font-size: 0.875em;/*1 ÷ 16 × 14 = 0.875em value*/
width: 12.5em;/*1 ÷ 16 × 200 = 12.5em value*/
height: 6.25em;/*1 ÷ 16 × 100 = 6.25em value*/
border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em value*/
margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em value*/
padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em value*/
line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em value*/
}

Now let's look at the calculated layout value under Firebug

To better illustrate the problem, I calculated the values ​​of the elements with and without font size set in Firebug:

The main purpose of my screenshot is to illustrate a problem. If the font size of the element itself is set, its calculation formula is no longer the same as mentioned above. We need to make some modifications:

1. The font calculation formula remains the same
1 ÷ font-size of the parent element × pixel value to be converted = em value
2. The calculation formulas for other attributes need to be changed to
1 ÷ element's font-size × pixel value to be converted = em value So let's calculate it now:

#wrapper {
font-size: 0.875em;/*1 ÷ 16 × 14 = 0.875em value*/
width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em value*/
height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em value*/
border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em value*/
margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em value*/
padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em value*/
line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em value*/
}

Let's take a look at the calculated value:

Summarize

After a long introduction, the only thing I want to tell you is the following points

1. The default font size of the browser is 16px
2. If the element itself does not set the font size, then all the attribute values ​​of the element itself, such as "border, width, height, padding, margin, line-height", can be calculated according to the following formula:
1 ÷ font-size of the parent element × pixel value to be converted = em value
3. You must understand this one slowly, otherwise it will easily be confused with the second point. If the element has a font size set, the font size conversion is still calculated according to the second formula, which is the following:
1 ÷ font-size of the parent element × pixel value to be converted = em value. If the element has a font size, other attributes of the element, such as "border, width, height, padding, margin, line-height", need to be calculated according to the following formula:
1 ÷ element's own font-size × pixel value to be converted = em value. I don't know if you understand it this way. If you don't, you can look back at the example above.

Introduction and conversion method of em and px in CSS

What is em?

em refers to the font height, and the default font height of any browser is 16px. So all unadjusted browsers will conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em. To simplify font-size conversion, you need to declare Font-size=62.5% in the body selector in CSS. This will change the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em. In other words, you only need to divide your original px value by 10 and then use em as the unit.
em has the following characteristics:
1. The value of em is not fixed;
2. em will inherit the font size of the parent element.

Rewrite steps:

1. Declare Font-size=62.5% in the body selector;
2. Divide your original px value by 10, and then use em as the unit;
It’s simple, right? If the problem can be solved with just the above two steps, no one would use px. After the above two steps, you will find that the fonts on your website are larger than you imagined. Because the value of em is not fixed and will inherit the size of the parent element, you may set the font size in the content div to 1.2em, which is 12px. Then you set the font size of the selector p to 1.2em, but if p is a child of content, the font size of p is not 12px, but 1.2em = 1.2 * 12px = 14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent element body, which is 16px * 62.5% * 1.2=12px. As p is its child, em inherits the font height of content, which is 12px. So 1.2em of p is no longer 12px, but 14.4px.
3. Recalculate the em values ​​of the fonts that are enlarged. Avoid repeated declarations of font sizes, that is, avoid the phenomenon of 1.2 * 1.2 = 1.44 mentioned above. For example, if you declare the font size in #content as 1.2em, then when declaring the font size of p, it can only be 1em, not 1.2em, because this em is not that em. It inherits the font height of #content and becomes 1em=12px.