15 CSS Relative units, how many do you know? em, rem, ex, cap, ch, ic...
Tags: webdev, css, html, responsive
Published: 2018-08-18 13:05:47

---
title: 15 CSS Relative units, how many do you know? em, rem, ex, cap, ch, ic...
published: true
description: I found out there are 14 relative units in CSS and compiled a list of them so you don't have to.
tags: webdev, css, html, responsive
cover_image: https://cdn-images-1.medium.com/max/800/1*OkcOPoWR3bxKY2axlDX9UA.gif
---

---


If you are reading this, I'm pretty sure you know at least 5 ways of centring HTML elements using CSS. So, 15 options for relative sizing shouldn't come as a surprise to you. Let me tell you, some of them are bizarre.

##**The story**
I saw this tweet by JavaScript Teacher, I only knew 5–7 of these properties and it gave me a massive [FOMO](https://www.urbandictionary.com/define.php?term=fomo) attack. So, I decided to write this article and save your from the FOMO.

{% twitter 1029722982774697985 %}



###**What are relative units & why do we need 'em?**
Have you ever wondered that none of the screens you own have the same sizes & dimensions? But they all do display webpages. So the webpages need to be styled in a way that adapts in *relative proportions* to the display (or any other HTML element).

In short, making such responsive, adaptive layouts gracefully possible.

![new app downloads](https://cdn-images-1.medium.com/max/800/1*OkcOPoWR3bxKY2axlDX9UA.gif)



###**1. the unpredicatble em**
Relative to the **font-size** of the current element (`2em` means twice the current font-size).  *A length property dependent on font-size, yep how magical.*
```
.post {   
   font-size: 24px;
   border-left: 0.25em solid #4a90e2;
}

/* The border-left-width will compute to 6px. */
```

Working with `em` can get tricky as it gets it's value relatively from its parent element. In case of nested elements, it gets messy when the parent has `em` value too.


###**2. the savior rem (root em)**
Just like `em` but relative to the font size of the **root element** of the document. 

```
p {
    margin-left: 1rem;
}

h4 {
    font-size: 2rem;
}

/* Unlike the em, which may be different for each element, the rem is constant throughout the document */

```

For this technique, it is fundamental to set your base font-size, by browser default usually this is 16px.



###**3,4. vh and vw **
Unlike `em` and `rem` which are dependent on font size `vh` & `vw` are dependent on the size of the viewport.

`1vh` = **1%** or **1/100th** of viewport height
`1vw` = **1%** or **1/100th** of viewport width

You may have seen some sites with typography that scales beautifully as you resize your browser window, `vw` & `vh` make it happen.


###**5,6. vmax & vmin**
Viewport max and viewport min: 1vw or 1vh, whichever is bigger or smaller respectively.

`1vmax` = **1%** or **1/100th** of the bigger value between 1vw or 1vh
`1vmin` = **1%** or **1/100th** of the smaller value between 1vw or 1vh 



###**7. Good'ol %**
Quite popular, everyone's friend & fairly obvious `%` is relative to it's parent element.
```
.post {
  font-size: 24px;
}
.post-category {   
  font-size: 85%; 
} 
.post-title {   
  font-size: 135%; 
}
/*      
Child elements with % font sizes...      
  
  85%     
  0.85 * 24 = 20.4 px        
  135%     
  1.35 * 24 = 32.4 px
*/
```
---

Now let's dig into some obscure and relatively unknown ones.


###**8,9. Experimental vi & vb**

The are experimental APIs not meant to be used in production as there .isn't any browser support.

`1vb` = 1% of the size of the initial [containing block](https://medium.com/r/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FAll_About_The_Containing_Block), in the direction of root element's [block axis](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties#block-dimension).
`1vh` = 1% of the size of the initial [containing block](https://medium.com/r/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FAll_About_The_Containing_Block), in the direction of root element's [inline axis](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties#inline-dimension).

They aren't very popular or supported as they are quite new, you can dig more about them in CSS Value and Units Module Level 4.


###**10,11. lh & rlh**

They're like `em` & `rem` but instead of font-size they depend on line-height.

`lh` =  Equal to the computed value of the [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) property of the element on which it is used.
`rlh` = Equal to the computed value of the [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) property on the root element.


###**12. ex**
The `**ex**` unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font. The **x-height** is, roughly, the height of lowercase letters such as a, c, m, or o.


###**13. cap**
It's the measure of the so called cap-height. The [spec](https://drafts.csswg.org/css-values-4/#cap) defines cap-height as *approximately equal to the **height of a capital Latin letter**.*


###**14. ch**
*Represents the **width of character 0**,* or more precisely the advance measure of the glyph "0" (zero, the Unicode character U+0030) in the element's font.


###**15. 'ic' ideograph count**
`ic` is the Eastern equivalent of `ch` mentioned above. It is the size of the CJK (Chinese/Japanese/Korean) ideograph `*水*` ("water", U+6C34), so it can be roughly interpreted as "ideograph count".


Some of these are pretty strange and uncommon but I'm pretty sure each one of them have their own use-cases and reasons to exist. What are your favourite ones?