Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Em vs Rem units in CSS?
You might have observed 2 options while setting the size of the elements using CSS properties, one an absolute unit and the other a relative unit. The absolute unit is identical and is fixed and its size can be set with cm, mm, px. On the other hand, relative unit is relative to something else which can be a parent element or any other element.
In this tutorial, we are going to have a look at the comparison between the em and rem units in CSS.
The Em unit
The em unit makes it possible to change the size of the element whose font size is relative to the element which is its parent. Which means if the size of the parent element changes there will be a change in the child element.
Let’s look at an example to understand what does the em unit do.
Example
In this example, we will be changing the font size of the child element to 35px. The margin of the child element will also be changed to 50px.
Here, we first created a parent element and then its size is set to 17.5 px and the font size of the son element is set to 1em which means that the size of the font of the son element will be double and the margin of the element will be the same. Let’s look at the output that we will be getting from the code.
Note − The usage of the font-size property. The font-size is relative to the father (parent) element when it is used on other properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Difference between em and rem</title>
<style>
.father {
paddding: 0px;
font-size: 16px;
}
.son {
margin: 1em;
font-size: 1em;
}
</style>
</head>
<body>
<div class="father">
This is the Father element
<div class="son">
This is Son element
</div>
</div>
</body>
</html>
In the above output there is a parent element and a child element. The size of the child element is shown same as the parent element in the output..
The rem unit
The unit rem is relative to the size of the font of the element root which means the html element. If the <html> does not have a size of the font which is specified then the default value of the browser is used, the parent element is not considered and only the root element is considered here.
Example
We will be keeping the font size of the child element to 50px and then setting the margin of the element to 40px. The size of the rem unit will be relative for all declarations unlike em.
In the following example, we first used the root element and then created a parent element and the child element. We then set the font size of the root element to 18px and the font-size of the parent to 15px. The size of the font of the child element was then set to 1.5rem which means double the size of the root element and not the parent element. Let’s look at the output to see what the rem unit does.
<!DOCTYPE html>
<html lang="en">
<head>
<title>The difference between em and rem units</title>
<style>
html {
font-size: 18px;
}
.son {
font-size: 2rem;
margin: 1.5rem;
}
.father {
font-size: 13px;
}
</style>
</head>
<body>
<div class="father">
This is parent
<div class="son">
This is Child in rem unit system
</div>
</div>
</body>
</html>
You can see in the above output that the child element is not the double of the parent element but it is the double of the root element.
The unit em, is relative to the font-size of its nearest parent and it can lead to the compounding effect. The rem unit, is relative to the HTML root font size but it does not lead to the compounding effect.
Em vs Rem units in CSS
The units include em, vh, vw, and rem. The relative units are also known as scalable units and plays an important role in the responsiveness of the website. The em and the rem units are both scalable and relative. The em unit is relative to the font size of the parent element in the HTML document and the rem unit, is relative to the font root of the whole document.
Conclusion
The difference between the em and the rem units is that the em unit will be relative to the parent(element) element and the rem unit will be relative to the <html> root element and both these units come under the relative units and they help in making the website responsive. These units help in setting the size of certain elements.
390 Views
