Are you confused about REM and EM?

#css #rem #html #beginners

REM can be confusing for most people at first, especially without a solid understanding of its close cousin EM and their counterpart, pixels. However, once we begin to understand when to use these different relative units, one realizes how much adaptability and flexibility we're allowed when trying to make a responsive website.

When I first started learning CSS, like many people I stuck with my trusty px (pixel) for all my measurements whether it be font-size, padding, margins etc. so. when i first found a video discussing rem and em I had no idea what was happening.

Both rem and em are relative units, meaning they're relative to their parent's property whereas px is not. Before even considering rem, it’s important to recognize the relationship between em, markup, and inheritance.

Let me give you a quick breakdown of em:

Em is relative to it's parent unit ...

Let's say for example that we have our base html has a
font-size of 16px. Now if we were to edit a title in our
css and give it a font-size of 1.6em, what this means is
that it will have a font-size that is (1.6 * 16) = 25px;
now let'a say that we also want to change the font-size of
a paragraph that is the child element of the title, if we
were to give that child element a font-size of .773em,
this translate to a font-size of (.773 * 25) = 19px. It is
now multiplied by 25 because the html is no longer the
parent element, but rather the title element.

Here is a visual example:

What is REM?

Now that we've got em out of the way, it's time for the easier unit to understand which is rem. The rem unit, short for root em, will always be relative to the font-size of the root html element (default of 16px). So this means that if we use rem, the values of parent elements are ignored contrary to em, and only the value of the root is taken into consideration. So 2rem will equal 2 times whatever the root element's font size is, regardless of any other element's font size.

One reason i tend to use rem though is because if I'm trying to achieve consistent spacing without any extra markup, rem can be used to easily define the padding and margins without being affected by any parent element even if nested.

Hopefully this short blog was able to clear ay confusion you may have had, now go practice it on your own to get more comfortable!