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 add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
A Quick Comparison of JOIN and Subquery in SQLSQL/MySQLAttributes and Properties in JavaScript and HTMLHTMLHow to create ‘share on LinkedIn’ link using just HTML?HTMLAdd animated hamburgers menu using Hamburgers collection on GitHubCSSHow to use HTML picture Tag?HTMLActions vs. Filters: hooks in WordPressWordPress