Yogesh Chauhan's Blog

Relative Length Units in CSS

in CSS on February 7, 2021

em

em sets the font-size relative to the font-size of the parent element.

So, if the parent element’s font-size is 40px and if we set child element’s font-size 0.5em then the child element’s font-size will be 20px. Just like this example:

ex

We don’t use ex much but it sets the font-size to the x-height of parent font-size.

ch

ch sets the font-size relative to the width of the character “0”.

rem

rem sets the font-size relative to the font-size of the root element.

As we can see in the example below, the HTML doc’s font-size is 20px. The p tag has 10px size and it takes that font-size. The span inside p tag has font-size 1rem which takes HTML doc’s font-size (20px).

The div outside of the p tag has font-size of 2rem which looks for HTML doc’s font-size (20px) and sets itself to 40px.

vw

vw sets the font-size relative to the viewport. The full form of vw is viewport width and 1vw is equal to 1% of viewport width.

vh

vh sets the font-size relative to the viewport. The full form of vh is viewport height and 1vh is equal to 1% of viewport height.

vmin

vmin considers viewport height and viewport width both and whoever has smaller dimension, it applies that dimension to calculate the element’s font-size.

vmax

vmax considers viewport height and viewport width both and whoever has larger dimension, it applies that dimension to calculate the element’s font-size.

percentage (%)

% sets the font-size relative to the parent element. So, if we set the font-size 50% for child element and if parent element’s font-size is 40px then child element’s font-size will be 50% of 40px = 20px.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to install PuTTY on a MacOS?MiscellaneousHow to create a Recent Posts function in WordPress?WordPressHow to modify AutoSave Interval using code in WordPress?WordPressCrypto.getRandomValues() method in JavaScriptJavaScriptWhy does MOV matter in IT or any kind of projects?MiscellaneousHow to add a ribbon on top of a container using CSS?CSS