What are em and rem
Em are rem are Css units called Relative units.
Relative units are units that are always relative to something else, possibly the parent element or the viewport. They are not fixed, they have dynamic flexibility and they can resize and scale according to the parent element's width or font-size value.
Em and rem are very important to responsive design. They help everything to scale proportionally thereby creating a fluid and dynamic experience for the user. If you build your website using mainly relative units when a user changes the default font-size on the browser window, everything would scale proportionally, leaving your website looking as great as you built it and also satisfying your user.
This is in contrast to using fixed-sized or absolute units such as pixels px which do not change or scale when a user tries to adjust the sizing of things on your website.
Em vs Rem
Em and rem are similar in that they both scale relative to a font-size. The difference lies in which font-size they are relative to.
Em values are relative to the font-size of its parent element while values set in Rem which means root em always scales relative to the root <html> element's font-size. when you do not specifically set the font-size of the root element in your CSS, the browser inherits the font-size of the browser, which is usually 16pxthereby making your rem values relative to 16px.
When to use Em and Rem
Em
An em value can compound from one level to another. Since font sizes set in em are inheriting the parent elements' font-size value, it can lead to a compounding issue when dealing with nested elements. This means that a child element would scale relative to its parent container and that parent in turn would scale relative to its own parent. This causes font sizes set in em to behave strangely or not behave as expected. This compounding with font-sizes can make things appear larger than they should be.
container{
font-size: 1.125em; /* 18px */
}
parent {
font-size: 1.5em; /* 27px */
}
.child{
font-size: 1.5em; /* 1.5em is 40.5px because the value is scaling relative to its parents value and its parent font-size value is scaling relative to the container's font-size value. The value is compounding*/
}
It is much better to use em to set values on margins and paddings. Using em for setting margins and paddings works quite differently from using em to set an element's font size. The em value you use on padding or margin on an element is relative to the exact font-size of that element and not the font-size of the parent. If the element does not have a font-size set, it would inherit the browser's default font-size earlier stated as 16px. The compounding issue does not occur when em is used in relation to margin and padding.
parent{
font-size: 18px;
}
.child{
font-size: 2.5em; /* 2.5 * 18px = 45px */
padding: 1em; /* here 1em = 45px not 18px. */
margin: 2em; /* here 1.125em = 50.6px not 20.25px. */
}
Rem
Rem provides a more reliable way to determine your font-size value. It is always going to be relative to one value which is the font size of the root <html> element therefore eliminating the compounding issue. It is good practice to always use rem for font sizes.
How to convert from px to em or rem
Em and rem are multipliers. 1em and 1rem is equal to 1 * parent element's font-size and 1 * root element font-size respectively and 4em and 4rem would be 4 * parent element's font-size and 4 * root element font-size respectively.
/* For em */
parent{
font-size: 18px;
}
.child{
font-size: 2.5em; /* 2.5 * 18px = 45px */
}
/* For rem */
html{
font-size: 16px;
}
element{
font-size: 2.5rem; /* 2.5 * 16px = 40px */
}
To convert from px to em or rem you divide your desired px value by your parent or root element's px value. To give an instance, if the parent or root element's font-size value is 16px and your desired value is 30px, to convert 30px to em or rem, you would divide 30 by 16 30/16 which is 1.875em or 1.875rem. If you’re like me and you hate math or you just want to save time, you can use this px to em or rem unit converter by w3schools to get your desired em or rem value.
Summary
Emandremare relative units.Emis relative to itsparentelement'sfont-sizewhileremis relative to the root<html>font-size.Em values are not good for setting
font-sizebecause of compounding.Emis best used for setting values onmarginandpaddingRem is best for setting
font-sizevalues.