Differences between px, rem, and em in CSS
When learning web design or interacting with CSS codes of various websites, you are most likely to come across different units of measurement including pixels (px), rems, and ems, and may wonder what their differences are, when, and how to use each.
If you are in such a state where you can't distinguish how each is used, then you stumbled upon the right place.
In this article, you will learn the differences between px, rem, and em in CSS and when to use each unit.
These units of measurement are commonly used in CSS to define font sizes, width and height, margin and padding, and other design elements.
Let's have a look at each of the units.
Pixel (px)
This is the most common unit of measurement in CSS, which refers to the smallest unit of an image or display device.
A pixel is a single dot on a screen, and it has a fixed size that remains constant regardless of the device or screen size. When using pixel measurements, the size of an element is fixed, and it will not change regardless of the screen resolution or the size of the user's device.
One of the benefits of using pixel measurements is that it allows designers to create a precise design that looks the same across all devices. However, this can also be a drawback since it can lead to poor user experience, especially on smaller screens, where the text may appear too small or too large.
Rem
REM (root em) is a unit of measurement that is relative to the root font size of the document. The default font size of the HTML document is 16px, which means that 1rem is equivalent to 16px.
1rem = 16px
Therefore, by default 0.5rem = 8px, 1.5rem = 24px, 2rem = 32px, and so on.
However, you can change the root HTML font size using CSS as below:
html{
font-size: 20px;
}
In this case, 1rem will be equal to 20px, 0.5rem will be 10px, and so on.
When using rem, the size of HTML elements will change based on the root font size of the document. If the root font size is changed, all the elements that use rem will be adjusted accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.p1{
font-size: 1rem;
}
.p2{
font-size: 2rem;
}
.p3{
font-size: 3rem;
}
</style>
</head>
<body>
<p class="p1">Paragraph one</p>
<p class="p2">Paragraph two</p>
<p class="p3">Paragraph three</p>
</body>
</html>
In this example, the first paragraph has a size of 1rem (16px), the second 2rem (32px), and the third 3rem (48px) because the default HTML document root font is 16px.
But when we change the font size for HTML document as below;
<!DOCTYPE html>
<html>
<head>
<style>
html{
font-size: 10px;
}
.p1{
font-size: 1rem;
}
.p2{
font-size: 2rem;
}
.p3{
font-size: 3rem;
}
</style>
</head>
<body>
<p class="p1">Paragraph one</p>
<p class="p2">Paragraph two</p>
<p class="p3">Paragraph three</p>
</body>
</html>
The font sizes for the three paragraphs will automatically change relative to the new root font size. In this case, where I have set the root font as 10px, the new paragraphs' font sizes will be 10px, 20px, and 30px respectively.
This is both an advantage and a drawback. It's an advantage because it allows designers to easily adjust the size of all the elements on a page by simply changing the font-size of the root element. On the other hand, it can be a drawback since the design may become inconsistent if different elements use different font sizes.
Em
Em is a unit of measurement relative to the font size of the parent element. For example, if the parent element has a font size of 16px, and the child element has a font size of 0.5em, the child element will have a font size of 8px.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv{
font-size: 20px;
}
.p1{
font-size: 1em;
}
.p2{
font-size: 1em;
}
.p3{
font-size: 1.5em;
}
</style>
</head>
<body>
<p class="p1">Paragraph one</p>
<div class="mydiv">
<p class="p2">Paragraph two</p>
<p class="p3">Paragraph three</p>
</div>
</body>
</html>
In the above example, we have three paragraphs. Two (second & third) are inside a div element with a class "mydiv" while the first one is outside. All of them are assigned font sizes in the em unit.
In this case, the font size for the two paragraphs inside the div is relative to that assigned to the div class (ie, 20px) while for the first is relative to the root font size of the HTML document (ie, 16px) as it doesn't have a parent element with assigned font size.
In summary;
The first paragraph font size is equal to 16px.
The second paragraph's font size is equal to 20px.
The third paragraph font size is equal to 30px.
As you may have noted, the first and second paragraphs have different font sizes (ie. 16px and 20px) despite all of them being assigned font-size: 1em.
Using em is advantageous as it allows designers to create a design that scales with the font size of the parent element. This makes it easy to create a consistent and responsive design that adjusts to different screen sizes.
However, using em can also be a drawback since the size of an element may become difficult to predict if it has multiple parents with different font sizes.
Additionally, using em for font sizes can lead to inconsistent spacing and alignment, especially when different elements use different font sizes.
Conclusion
CSS supports multiple units of measurement for defining the size of design elements, among them being pixels (px), rems, and ems. These units often cause confusion to new website designers.
Each of these units has its advantages and disadvantages, and it is essential to understand them and choose the appropriate unit based on the design requirements.
In this article, you have learned how each of these units works and how they relate to each other.
