Home >Web Front-end >CSS Tutorial >Is em in css relative to the parent element or the size of the current element? (code example)
Is em in css relative to the parent element or the size of the current element? (code example)
- 不言forward
- 2018-10-24 16:58:143209browse
What this article brings to you is about whether em in CSS is relative to the size of the parent element or the current element? (Code sample) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
em is a commonly used relative unit in CSS, so it is necessary to pay attention to some pitfalls.
1em is equal to the font size of the current element, unless you are setting font-size
There are many articles saying that 1em is equal to the font size of the parent element! This statement is actually inaccurate. Look at the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 16px;
}
div {
font-size: 32px;
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Why do some people mistakenly think that 1em is equal to the font size of the parent element? This is because if you use em units when setting font-size, font-size will still inherit the default value, so 1em is still equal to the font size of the parent element. This is a special case only when setting font-size! This special case is easy to understand, after all, I am setting the font size of the current element! How can we use the font size being set at the moment as the unit! Isn't this a paradox!
For example, if this paradox really happens, the following situation will occur: the fruit shop owner says to you: "I will pack them for you as many kilograms of oranges as you want," but you say to the boss: "The quantity I want is 2 times the quantity I ultimately want" (analogous to setting font-size: 2em). At this time, the fruit shop owner is probably going to collapse. How many oranges will he pack for you?In order to avoid this happening, if you use relative units when you specify the quantity, then this unit must not be relative to the quantity you specify at the moment. You can say to your boss: "The quantity I want is twice what the last customer bought" (similar to setting font-size: 2em). After you buy the oranges, you can say to the boss: "I want some more apples, twice as many as the oranges I just bought" (similar to setting padding-bottom: 2em).
Except for this special case, when setting other css properties, 1em is equal to the font size of the current element .
In the above example, using em when setting font-size can prove the existence of this special case:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 16px;
}
div {
font-size: 2em; /* 仅仅这一行改变了！ */
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The final height is still 64px, because in When setting font-size, 1em == 16px; when setting padding-bottom, 1em is equal to 32px.
What happens if you use em as the font-size on the root element? It has no parent element! It doesn't matter, for inherited properties (including font-size), the default value on the root element is initial. For most browsers, the initial value of font-size is 16px. Therefore, when setting the font-size on the root element, its value is still 16px, and 1em is equal to 16px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
/* 2*16px=32px */
font-size: 2em;
}
div {
/* 2*32px=64px */
font-size: 2em;
/* 2*64px=128px */
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The above is the detailed content of Is em in css relative to the parent element or the size of the current element? (code example). For more information, please follow other related articles on the PHP Chinese website!