YogeshChauhan.com
Relative Length Units in CSS
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.

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

Learn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPHow to add onclick event to html elements dynamically using JavaScript?JavaScriptWhat is API?MiscHow to zoom an element on hover using CSS?CSSThe flex-grow, flex-shrink and flex-basis Properties in CSSCSSReading Multiple Inputs in SwiftSwift