When to use in or %?

The units em and ex are relative to the font size. ex is the height of the lowercase" x", and em is simply the" font size "(the name of the unit historically comes from 'the width of the uppercase" M", but this definition is not used in CSS).

That way, if you have an element that needs to be proportional to a body of text (say, a box with text inside, so that the text never leaves the box when the font increases or over space when the font decreases) then em - or more rarely ex - is indicated.

Already % is proportional to the dimensions of the parent element, so that if what you want is for example that one element occupies 80% of the available space, and another the remaining 20%, this unit is indicated. There are even the units vw, vh, vmin and vmax which are proportional to the entire screen (regardless of the hierarchy of elements), and which can also be used to specify the font size (cannot set font-size to %).

Here explains the difference between all CSS metrics.

In

Units of values in are the most complicated to work with. She is abstract and arbitrary. Here's an example, 1em is equal to the current font size of the element in question, i.e. if you haven't set font size anywhere on the page yet, then it will automatically pick up the default browser font size, which is probably 16px. So, it is defined that by default 1em = 16px. Let's say you set in the tag body { font-size:20px } then the 1em will become 20px. As soon as it works.

Another example: if you create a tag h1 { font-size: 2em; }, the size of H1 in px will be 32px if you haven't set any value yet in css.

Percentage %

Percentage just as the name says works with percentage of value. If a parent is the size of 20px, and you set the child to font-size:50% it will be the size of 10px.

O percentage is very good for working with the tools to grow and decrease the size on the text Page.