# A Look Into CSS Units | Pixels, EM, Percentage | Complete Guide

**URL:** <https://onehack.st/t/a-look-into-css-units-pixels-em-percentage-complete-guide/160814>\
**Category:** Tutorials & Methods\
**Tags:** tools, programming\
**Created:** [October 31, 2020, 12:27pm UTC](https://onehack.st/t/a-look-into-css-units-pixels-em-percentage-complete-guide/160814 "2020-10-31T12:27:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheStrength](https://onehack.st/user_avatar/onehack.st/thestrength/32/46753_2.png) [@TheStrength](https://onehack.st/u/TheStrength)\
**Post date:** [October 31, 2020, 12:27pm UTC](https://onehack.st/t/a-look-into-css-units-pixels-em-percentage-complete-guide/160814/1 "2020-10-31T12:27:35Z")

</div>

The unit takes an important role in measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely **Pixel, EM, and Percentage**.

In this post, we are going to run through these units to get further insight into these units of measurements. _(Source: Hongkiat)_

#### PX

Pixel is a fixed unit measurement and the smallest unit on screen measurement but don’t confuse this with the Pixel that defines screen resolution. The Pixel in CSS has nothing to do with the screen resolution.

When we try viewing a web page fixed at **1024px** width say on a tablet with **1024px by 480px** screen resolution, the web page will not fit in the screen.

I’ve been experiencing this issue in the past and found out that the Pixel in CSS is actually not a linear unit – it is in fact a radial measurement.

Basically, the Pixel in CSS measures the length of the display area instead of the screen resolution, so the **1024px screen resolution does not mean that the screen is also 1024px** of the length.

#### More On PX

I’m not an expert on the technicalities in this matter but if you know [Trigonometry](https://en.wikipedia.org/wiki/Trigonometry), and want to find out more, check out the following explanation from **Sean B. Plamer** : [CSS px is an Angular Measurement](http://inamidst.com/stuff/notes/csspx).

![css-units](https://assets.hongkiat.com/uploads/css-units/rad-px.jpg)

#### Finding The Display Area

So, how do we find the actual display area of a device? Luckily, there is a handy special calculator to **roughly estimate** the display area in format of Pixel, [CM to PX](https://www.unitconverters.net/typography/centimeter-to-pixel-x.htm).

We simply need the length of the device in `cm` and the PPI (Point Per Inch) / DPI (Dot Per Inch) which you can get these from the device box. With this, it turns out that the tablet I used is merely `953px`in length.

![css-units](https://assets.hongkiat.com/uploads/css-units/cm-to-px.jpg)

#### Pixels Font Size in Photoshop

When working on Photoshop, we will find that the font size is by default set to **Pt (Points)**. The Pt unit is ideal for print styles.

To not confuse this with `px` when we are translating it to Web documents, we can change the units from the following menu: **Edit \> Preferences \> Units and Rulers**.

There, you get a window option as shown in this screenshot below. Choose ‘pixels’ for the Type unit.

![css-units](https://assets.hongkiat.com/uploads/css-units/units-rulers.jpg)

And, we have px for the font size.

![css-units](https://assets.hongkiat.com/uploads/css-units/px-font-menu.jpg)

#### EM

EM is a relative measurement. In CSS, EM refers to the multiplication of the default font size from the device or the document itself, that is why I personally word EM as **EMphasize** , but of course don’t take my word for it.

Here is an example; let’s say in a document, the font size is assigned for is `16px`. `1em` is equal to `16px`, `2em` is equal to `32px` and so on.

Although EM is traditionally used for font sizing and in fact it is the standard unit used in browser styles for measuring font size, we can also used EM to define an element’s length.

The only constraint when working with EM unit is it is not quite intuitive, but there are two practical ways we can handle this. First, we can use this calculator, [PX to EM](http://pxtoem.com/); it’s a handy calculator that I use often.

![css-units](https://assets.hongkiat.com/uploads/css-units/px-to-em.jpg)

Another way is to set the document pixel base to `10px`, so we can calculate it more easily; for instance setting `15px` at `1.5em`. Well, I hope you get the basic idea with this example.

#### Percentage

It is more straightforward with percentage, which measures relatively to the parent length. When the parent width is `800px` then `50%` would become `400px`. In recent years, as Responsive Design starts becoming the web design standard, percentage unit is adapted more frequently in the wild.

Alright, let’s take a look at the following example; this code below defines `.container` and `.main` class selector with `60%` for the width, but these classes refer to different parents thus they generate different lengths.

The `.container` will take `60%` of the browser viewport width, whilst the `.main` will take `.container` width as its direct parent.

1. `.container {`

2. ` ` `width` `: ` `60%` `;`

3. ` ` `margin` `: ` `100px` `auto` `;`

4. ` ` `background-color` `: ` `#eaeaea` `;`

5. ` ` `padding` `: ` `1%` `;`

6. ` ` `height` `: ` `250px` `;`

7. ` ` `font-family` `: ` `Arial` `;`

8. ` ` `text-align` `: ` `center` `;`

9. `}`

10. `.main, .aside {`

11. ` ` `line-height` `: ` `253px` `;`

12. `}`

13. `.main {`

14. ` ` `width` `: ` `60%` `;`

15. ` ` `height` `: ` `100%` `;`

16. ` ` `float` `: ` `left` `;`

17. ` ` `background-color` `: ` `#ccc` `;`

18. `}`

19. `.aside {`

20. ` ` `width` `: ` `40%` `;`

21. ` ` `height` `: ` `100%` `;`

22. ` ` `background-color` `: ` `#aaa` `;`

23. ` ` `float` `: ` `left` `;`

24. `}`

Thus, it will give us the following nice result:

![css-units](https://assets.hongkiat.com/uploads/css-units/percentage-demo.jpg)

As percentage is also a relative unit, so it has a similar constraint like the EM unit as well. It is not obvious how much a percentage `15px` is of `500px`? This generally happens when we translate `px` unit from the design stage to web document in many cases.

There are two ways we can take to this matter, either we do it traditionally with a calculator or if you are comfortable with using CSS Pre-processor, you can utilize the `percentage()` function from [Sass](https://sass-lang.com/).

#### Final Thoughts

There are many discussions on the best practices of using units in web design. But ideally the PX unit should be used when the properties generally need to be precise e.g. the `border-radius` and `box-shadow` horizontal or vertical offset, whilst for the EM unit [as suggested by W3C is better used for font sizing](https://www.w3.org/Style/Examples/007/units). Percentage is the ideal unit to use on responsive layouts.

**Happy learning!**

---

<div class="post-metadata">

**Author:** ![Huteng\_Batute](https://onehack.st/user_avatar/onehack.st/huteng_batute/32/12321_2.png) [@Huteng\_Batute](https://onehack.st/u/Huteng_Batute)\
**Post date:** [November 1, 2020, 2:19pm UTC](https://onehack.st/t/a-look-into-css-units-pixels-em-percentage-complete-guide/160814/2 "2020-11-01T14:19:20Z")

</div>

WIth @TheStrength post you gain knowledge and information… Thanks a lot…