The CSS units - rem and em

There are various CSS units. But, it's very important to choose the right CSS unit while working on a responsive design. In this post, I am going to describe the use of the CSS rem and em units. 

The rem and em units are relative CSS units. So, now the question is relative to what? The rem unit is relative to the root element whereas the em unit is relative to the parent element. For example:

difference between rem and em

The default value of the rem unit is 16px. However, the user can change the default value from the browser settings that enhance the readability of the website according to the user.


Changing font-size from the settings will change 'em' only if the parent elements don't have defined size.

Location: Abohar, Punjab, India

Comments

Post a Comment

Popular posts from this blog

Flipping Card

Image
Want to learn how to flip a card on hover? Follow me along! The final result would be:                                                        The color shades used can be accessed from  https://www.schemecolor.com/twitter-shades.php The twitter icon used can be accessed from  https://icons8.com/icons/set/twitter The link to codePen  https://codepen.io/bhadupranjal/pen/JjXdPOM So, let's get started. follow me along! Part I: Setting up the HTML  Step 1:  Create a new HTML file named index.html and add the basic HTML skeleton to it as shown.      Step-2:  Create a new CSS file named  stylesheet.css .  Don't forget to link this file to the HTML document. Step-3:  First add a parent div with class="card-wrap" to add perspective (discussed later) to the card.   I...
Read more