Read this article to understand how to use CSS ems to size HTML elements. We also explain the characteristics of units that can be specified other than em, so if you are interested, please check it out!
Table of contents
- Types and characteristics of units used in CSS
- Absolute value is independent of other factors
- Relative values change depending on other factors
- What is em unit in CSS
- Difference between CSS em and HTML em tag
- How to use the em unit
- Difference between em in CSS and other units
- Features of px
- how to use px
- difference between em and px
- Features and usage of rem
- how to use rems
- difference between em and rem
- % features
- Usage of %
- Difference between em and %
- Features of px
- Explanation of proper use of em, px, rem, and % for each usage situation
- Use rem to specify characters
- Use em for font size of specific elements
- Use % to specify layout size
- Use px for pixel-perfect coding
- summary
Types and characteristics of units used in CSS
There are four types of units for specifying the size of HTML in CSS.
- px (pixel)
- em
- rem
- %(percent)
Among the above units, the px unit corresponds to the absolute value, and the em, rem, and % correspond to the relative value.
Absolute value is independent of other factors
An absolute value, as the name suggests, is a value that never changes . If you specify the font size and element width in px, they will not be affected by changes in other factors such as the parent element or screen size.
Let’s take the code below as an example.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web</title>
<style>
.box{
height:300px;
width: 800px;
background-color: gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>As above, if you specify 800px for the width of the element, the size of the element width remains 800px even if the screen size is reduced.
Execution result
Absolute values are suitable when you want to specify a numerical value that is not influenced by other elements or the external environment such as the display screen.
Relative values change depending on other factors
A relative value is a value that changes relative to the value specified in CSS units according to changes in the parent element or display screen.
CSS units em, rem, and % are classified as relative values.
I will explain the movement of relative values using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web</title>
<style>
.container{
width: 500px;
}
.box{
height:300px;
width: 80%;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>In the above code, 500px is specified for the width of the container class, while 80% is specified for the width of the child element.
Since 80% of the parent element is the size of the child element, the width of the box class is reflected as 400px.
In this way, when you specify a relative value %, the size of the child element changes according to the size of the parent element .
Relative values go well with responsive design, which changes the design according to the size of the device, and are often used in web production, so let’s remember this article.
What is em unit in CSS
CSS em is a unit that specifies the size of HTML, and the default value is 1em=16px.
The number specified by em is based on the size specified for the parent element.
For example, if you specify “font-size:20px;” for the parent element and “font-size:1em;” for the child element, the same 20px as the parent element will be reflected in the child element.
Also, if you don’t specify a size for the parent element, the HTML default font size of 16px and 1em will be the same size.
Difference between CSS em and HTML em tag
In addition to the CSS em, there is also an em tag in HTML, but their roles are completely different.
The CSS em is a value that changes the size of an HTML element, and is derived from the reading of the capital letter “M”.
In the past, em was born from the background that “M”, which is close to a square, was used as a standard for typesetting when designing layouts.
The HTML em tag is an abbreviation for “emphasis” and has the role of emphasizing the specified range.
Although they have the same notation name, it should be noted that their roles are completely different, as you can see from looking back on the etymology of each other.
How to use the em unit
I will explain how to change the font size of HTML elements using CSS em.
Change the HTML font size by specifying em as the value of the CSS property font-size.
The font size specified by em will be the same size as the value when font-size is specified for the parent element, otherwise it will default to 16px.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Web</title>
<style>
p{
font-size: 1em;
}
span{
font-size: 1.5em;
}
</style>
</head>
<body>
<p>emは<span></span></p>
</body>
</html>The size of the p tag is not specified in the parent element, so if you specify 1em, it will be displayed in the same font size as 16px.
1.5em is specified in the span tag within the p tag. Since the size of the parent element p tag is 16px, it will be displayed in the same font size as 24px, which is 1.5 times that size.
Execution result
Difference between em in CSS and other units
We will explain the characteristics of px, rem, and %, which are units for specifying numerical values other than em, and their differences from em units.
Features of px
px is a specification method in units of dots (points) that display the screen, and there is no problem in recognizing 1px = 1 dot.
Since px is an absolute value, it has the characteristic that the specified value is not affected by changes in the environment.
px reflects the specified number as it is, so it is intuitive and easy to use, and it is a suitable specification method for those who have just started learning HTML and CSS.
Note that the value will never change, so if you specify a size in px suitable for a computer screen, it may be small and difficult to see on a smartphone.
how to use px
px is specified as follows.
font-size:20px;
width: 400px; The px unit is used in various scenes from character size to element width.
The sample code explains how to change the font size and element size using px.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Web</title>
</head>
<style>
.container{
width: 300px;
height: 200px;
background-color: rgb(166, 241, 91);
}
.container p{
font-size: 20px;
}
</style>
<body>
<div class="container">
<p></p>
</div>
</html>Specify “font-size: 20px;” in the p tag to change the font size to 20px, creating a box with a width of 300px and a height of 200px.
Execution result
difference between em and px
There are differences between em and px depending on the type of unit and whether or not the size is changed depending on the environment.
The em is a relative value whose size is determined by the size of the parent element, and the p tag is an absolute value that does not change the specified size.
Also, like the parent element, the size of the em changes depending on the environment, but the px tag is not affected by changes in the environment and the specified value will not change.
Features and usage of rem
rem is an abbreviation for “root em”, and is a unit that changes size based on the size specified in the html tag, which is the root element.
For example, the font size of the html tag is 16px, so the default is 1rem=16px.
With rem you can change all other rem units relatively by just changing the size of the html tag.
how to use rems
I will explain how to change the size of the html element and change the size relatively with rem using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="css/test.css">
<title>Web</title>
<style>
html{
font-size: 62.5%;
}
p{
font-size: 2rem;
}
h2{
font-size: 2.5rem;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
<h2></h2>
<p></p>
</html>If you specify 62.5% for the character size of the html tag, it will be 62.5% of the default size of 16px, so it will be the same size as 10px.
Setting as above is convenient because it makes it easier to understand the size of the value specified by rem.
For example, “font-size: 2rem;” in the p tag is twice 10px, so it is the same value as 20px. 2.5rem is 25px for h2 tag as well.
Just by changing the size of the html tag, you can change the size of all elements specified by rem, so it is also the best method for responsive support.
difference between em and rem
em and rem are the same relative value, but em varies relative to the size of the parent element, while rem varies relative to the size of the root element.
If you want to change the font size relatively, using em is suitable, and if you want to change the overall size starting from the html element, it is recommended to use rem.
% features
The % (percent) unit is a unit that changes relative to the size of the parent element, just like the em unit. As the name suggests, it specifies the size of the element as a percentage.
For example, if you specify “width:100px;” for the parent element and “width:80%;” for the child element, the size of the child element will be the same size as 80px, which is 80% of 100px.
Since the % unit changes according to the display screen of the browser, it is also characterized by being often used when responding to responsiveness.
It’s also worth remembering that % units are more often specified for content such as boxes and layouts than for characters.
Usage of %
Using sample code, we will explain how to specify the element width using % units.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="css/test.css">
<style>
body{
margin:0;
}
.container{
height:300px;
width: 50%;
background-color: rgb(193, 248, 138);
}
.container .box{
height: 100px;
width: 80%;
background-color: rgb(65, 127, 243);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</html>Execution result
“width: 50%” of the container class will be 50% of the browser because the width is not specified in the parent element.
In the execution result, the browser screen is displayed at 820px, which is the width of the iPad Air, so the width of the container class is 410px, which is 50%.
“width:80%;” of the box class is 80% of the width of the container class, which is the parent class, so it will be 328px.
Difference between em and %
em and % are the same in that they specify the parent element with a relative value, but they differ in how they specify the variable width.
em is a multiple based on the parent element, and % is a percentage based on the parent element.
Specifying in em is easy to understand with fine numbers, and specifying in % is easy to intuitively recognize approximate size.
Explanation of proper use of em, px, rem, and % for each usage situation
Each of the CSS units introduced so far has its own use cases.
I will explain how to properly use each unit for each usage situation.
Use rem to specify characters
Setting the font size using rem makes it easier to respond responsively.
The size of the element specified with rem changes relative to the size of the html tag, so you can change the font size on the web page at once simply by changing the size of the html tag.
If you specify em or %, the character size depends on the parent element, so it takes time to change it partially. Also, since px is an absolute value, all font sizes must be changed when responding to responsiveness.
For the above reasons, the rem unit is the most recommended method for specifying font size in web production, where responsive support is essential.
Use em for font size of specific elements
Elements with em specified change according to the size specified in the parent element, so they are perfect for partially changing the font size.
For example, you can fine-tune the size of a character to be emphasized in a sentence by specifying the em unit to match the font size of the parent element.
In addition, it is ideal when you want to change the font size only within a specific element.
Use % to specify layout size
It is recommended to specify the size of the element using px and % properly.
It is recommended to specify the % unit for the elements responsible for the layout of the web page, such as the header and main tags.
The percentage unit is 100% of the display screen, so if you specify it in the layout, even if the screen size changes, the elements will not be cut off or displayed scrolled.
For the above reasons, specifying the size of the header and main tags in % units can prevent layout collapse.
Use px for pixel-perfect coding
px is suitable for pixel-perfect coding because the specified number is reflected as it is.
Pixel-perfect is the coding process that coded the design comps to be an exact match.
However, since px is an absolute value, it may be cut off from the display screen if the terminal size changes. Note that all px sizes need to be changed to match the device when responsive .
summary
This time, I explained the differences between rem, px, and %, starting with the characteristics and usage of the em unit.
em is a unit that changes the size relative to the parent element of the specified element.
The advantage of using em is that you can partially specify the size relative to the parent element. It is suitable for use in situations where you want to change the size of only a part of the text or unify the size of a specific element.
CSS has units other than em, so let’s look back at their types and characteristics.
- rem (rem): A unit in which the size changes relative to the html tag that is the root element
- px (pixel): An absolute value where the specified number is not influenced by the external environment
- % (percentage): A unit that specifies the size as a percentage with the display range set to 100%
As explained in this article, each unit has a suitable usage situation, so please refer to it!
