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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
HAVING Clause in Postgres with Examples in All Aggregate FunctionsPostgresIntroduction to Angular modules Part 2: NgModules and componentsAngularWhat is PostgreSQL? How similar or different it is from SQL?Postgres@mixin and @include in SCSS (Sass)SCSSHow to import a CSS file using PHP code and not HTML code?PHPIf statement shorthand examples in JavaScriptJavaScript