YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

The order Property in Flex Items in CSSCSSCreate a menu with a curtain falling animation using CSS and JavaScriptCSSHow states work in React?ReactValues and Types Basics in JavaScriptJavaScriptWhat are Controlled Components in React?ReactWhat is Prototypal Inheritance in JavaScript?JavaScript