This post will be a quick introduction to what exactly is ’em’ in css.

If simply explained, em is equal to the font-size of the element to which the em is applied. For example, in the below code the value of em inside mainClass will be 20px, so 0.5em will be 10px.

.mainClass{
   font-size:20px;
   padding:0.5em;
}

In case we didn’t define font-size in mainClass then em value will be inherited from it’s parent and so on until it finds it upto the root element of the document.

If inside the CSS the font-size property is not defined anywhere then em value will be equal to the browser’s default font size which is generally 16px.

Related Posts