Your guidebook to CSS Units

An introduction to CSS Units — vh, vw, em, rem, %, px, and more!

I have always found it confusing to find the right units to use when styling the CSS and also how they relate to each other. Hope this article helps you understand that a little better.

link

1. Percent — %

When you define the value of a CSS element as a percentage, it sizes it to the percentage defined relative to its parent. So if I define a box as 50%

Now if I increase the size of the view, the outer 50 % will increase as its parent is the whole view but the inside one won't as it's bound to the parent container.

2. Pixel — px

Using px will give you exact pixel control over the sizing.
In the above example, we use 50 px, and it's not bound to any…