Know Your Units

Sarah Chima
Aug 22, 2017 · 6 min read
CSS image

Yes, you should know the CSS units. So, you’ve been playing with CSS for a while and you are probably familiar with some length properties like width, height, padding and other properties that take length values. You might have used the most common unit: the pixel and you might have come across other units like the em, rem, pt and maybe, you don’t really understand them. This article is for you. Let’s delve into them.

CSS units are broadly divided into two: the absolute units and the relative units.

The absolute units: This includes px, cm, in, pt, pc(yeah, inches and centimeters are valid units in CSS). Units are absolute in the sense that

  • they specify an exact measurement and
  • they do not depend on other units or the length of other elements for their value.

These units depend largely on the physical properties of the output devices so unless you are sure of the device each user will use (how is that even possible?), it is best to make use of relative units. However, they are best suited for print purposes. Now, let’s consider some of this units.

  1. Pixel (px): The value of the pixel depends the viewing device. For low resolution screens, a CSS pixel is actually the size of the screen pixel (a pixel on a screen is the smallest box that makes up the display of the screen). For high resolution screens and printers, one CSS pixel translates to multiple device pixel and it’s usually about 96 device pixels per inch.
  2. Centimeter (cm): One cm in CSS is well, one cm (10 millimeters) i.e. it is equivalent to its physical quantity.
  3. Inch (in): The inch is equivalent to 2.54 centimeters/96 pixels.
  4. Point (pt): The pt is equivalent to 1/72nd of an inch.
  5. Pica (pc): The pica is equal to 12 points.

Here’s a view of how each of them will appear on your screen. In the pen, the ideal thing to do is to show how each unit will appear when their value is 1 but some will appear so small. So I made all units appear the same by using their value equivalent to 1 inch. Try to play around with each value to see how their smallest value will appear.

2. Relative Units: Relative units depend on other length units for their value so their value is not fixed. They might not always produce the same results unlike the absolute units. They are better to use when the physical properties of the output devices are unknown since they scale better across devices. These units include em, rem, %, vw, ex and vh. Let’s meet these units.

i. em : The em depends on the font-size of the element. It is the calculated font-size of the element. For instance, if the font-size of an element is 16px and you specify a padding of 2em, then the padding will be equal to 32px. This unit helps to maintain the vertical pattern since resizing the font-size of an element will also resize the all lengths that use the em unit. So the element and the padding around it, using this instance, appear bigger or smaller depending on if the font-size was increased or decreased.

If a font-size is not specified, then the em value will depend on the inherited font-size. Since the em depends on the font-size of the element it is applied to, the value of the em varies from element to element. So in a particular document, the value of the em will not always remain the same. Examine the example below.

In the pen, notice that the font-size set in box 1 was inherited by box 2 and since the value was 2em, the font-size became 32px(2 * 16px). All other properties with the em unit in box 2 depended on this 32px for their value. In box 3, the font-size was set, and all properties with the em unit in box 3 depended on this. Also, note that the padding were all 2em but they varied from box to box because their values depends on the calculated font-size of the element.

So remember that 1em is equal to the set font-size of an element or the inherited font-size.

ii. rem: The rem depends on the font-size of the root element which is usually the font-size of the html element. Unlike the em which does not have a constant value in a particular document, the rem value is always constant and gives the same result i.e. if the font size of the root element is 16px, 1rem will always be 16px and 2rem will always be 32px. This makes the rem a much easier unit to use as the values remain constant.

In the pen above, notice I used the same padding on each of the element and they remained constant. This is because, as explain above, the value of the rem depends on the font-size of the root element, the html element in this case. Remember to play with this pen until you are convinced that you understand this concept. Also, compare this to the pen for the EM, can you clearly tell the difference between the EM and the REM.

iii. Percentage: The percentage unit is relative to the inherited length. In this case, we specify the length in percentages. Let’s say the inherited width is 400px, and we specify a width of 50%, this will automatically give the element a width of 200px i.e 50% of 400px. This doesn’t apply to just the width but to all length properties.

If you set your body element to a width of 100%, then it takes the width of the full screen. The same applies to the height.

The percentage unit is really useful in making pages responsive. This is because you can control the way a page appears across all screens without giving it a fixed unit. The example below shows how this is possible.

In the pen, notice that the width of each div is 50% and it is 50% of the containing div except box 1 which is 50% of the screen width. Try adding the height property and using % as the unit. Notice how this works. Next, give the box 1 a fixed height and note the difference too.

iv. Viewport Width (vw): The viewport width is the width of the browser window or screen you are viewing a page from. 1vw is equal to one hundredth(1/100) of the screen size and 100vw will give the size of the screen.

v. Viewport Height (vh): The viewport height is similar to the viewport width except that it refers to the height of the browser window or screen and not the width.

Practice: In the percentage pen, try to change the units of the widths to vw. Did you notice the difference? Do the same for the vh and try to notice the difference too.

vi. vmin: 1vmin is 1% of the viewport’s smaller dimension. If the vh is smaller than the vw, 1vmin is equal to 1vh and if the vw is smaller than the vh, 1vmax is equal to 1vmin..

vii. vmax: 1vmax is 1% of the viewport’s larger dimension. If the vh is larger than the vw, 1vmax is equal to 1vh and if the vw is larger than the vh, 1vmax is equal to 1vmin.

Try to resize the height and the width of your browser to see how the font of the header in the pen changes as viewport height or width increases and decreases. Remember to play with the pen until you are sure you understand how it works.

Note: These are not all the length units CSS has but they are the ones that are mostly used by developers. For an exhaustive list of all the units, check here.

Thanks for reading. If you think this article was worth reading, don’t forget to recommend. Got questions or any suggestion, please leave a comment. I’ll be glad to hear from you.

)

Sarah Chima

Written by

Front-End Developer.

She Code Africa

We celebrate and empower women in Technology across Africa by telling their story, involving them in code classes and also helping them share their knowledge and ideas through articles.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade