I decided to write this blog with the desire of exploring more about all the ways we can size things with CSS. With so many possibilities, it’s easy to feel overwhelmed and confused. There are 16 units of measurements that are currently supported by browsers: pixels, inches, picas, centimeters, millimeters, points, percentages, em, rem, viewport dimensions (vw, vh), ex, ch, Vmax (viewport max) and vmin(viewportmin) within these 16 units there are two classes: relative and absolute lengths.
The first thing to know about relative lengths is that they get their dimensions on something else, something that is outside or relative to the elements that you are trying to size, for example, the parent’s dimensions, the font size, and the viewport dimensions.
Percentages are based on their parent element. So if an element is 200px * 200px and that element had a child element that had a width of 50% and a height of 50% then the equivalent of the child’s dimensions would be 100px * 100px because 50% of 200px is 100px.
Here we have a div element called “parent-box” with a child div element called “child-box”.
Here in the css file, I made the parent-box have a height and width of 200px and the child-box have a 50% width and height, that means that now the child box will be 50% of the parent-box dimensions so if the parent-box is 200px * 200px that means that the child-box will be 100px * 100px having this result:
As you can see the blue element, which is the child, is exactly 50% of the pink box, which is the parent.
There are currently four types of viewport dimension units, vw(viewport width), vh(viewport height), vmin(viewport minimum), and vmax(viewport maximum). The first thing to know when using these units is that they automatically divide the screen of your browser into a 100 x 100 invisible grid each square or unit inside that grid will represent one vw, vh, vmin, or vmax depending on the case.
VH & VW
So, let’s take a deeper look into these two. If we declare an element to be 50vw wide and 50vh tall we will see that the element will take precisely half of the page’s height and half of the width of the page each vw or vh will now be equivalent to one cell in that invisible 100 * 100 so if we declare an element to be 50vw it will be half of the browser’s width, let’s see an example below.
Here we see that the parent element is exactly half of the browser’s height and width.
Vmin & Vmax
These units are a bit more tricky. So the way these units work is that the maximum or minimum length of either the height or the width is the one that will be used. For example, let us declare our parent box to have a width of 50vmax, if the width of the browser is 800px and the height is 500px then the width of the parent box is going to be 400px because the width is bigger than the height so the element will take 50 units from the invisible grid from the horizontal part of the browser, now if the height was 1000px and the width was 500px the parent box width would now be 500px because the browser’s height is now bigger than the width so the parent box will take 50 squares of the 100 squares of the vertical side of the browser and use that to declare the parent’s box width.
Now on to the vmin. Say we declare our parent’s box width to be 50vmin now the parent box width will take 50 units of the grid from the smallest viewport dimension. So same example, if the width of the browser is 800px and the height is 500px then the width of the parent box is going to be 250px now because we declared our parent box to have a width of 50 units of the smallest viewport dimension which, in this case, is the height. Now if the height was 1000px and the width was 600px the parent box width would now be 300px, I know it’s pretty confusing so let’s go back to the first example:
So that would look like this:
We can see that the parent box is now exactly half of the browser’s width length, that’s because the browser’s width is bigger than the height. Now if we switched things around we would get a different result.
So it looks like this:
We can see that the parent box is now exactly half of the browser’s height length, that’s because the browser’s height is smaller than the width.
Font attribute-based units
ex & ch
I have never used these units but let’s see how they work. So first let’s start with ex. This unit measures the height of the letter “X” of whatever font-family you are using, what do you mean the height of the letter “X”?! So, if this “X” is 10px tall (literally the letter “X”) then 1ex will be 10px let’s say that you are using an “X” from another font-family where the “X” is 9px tall so now 1ex will be 9px.
The way ch behaves is pretty similar the difference is that the length of 1ch will be based on the width of the letter “O” of a font-family so if the width of the letter “O” is 5px 1ch will be equivalent to 5px.
This unit responds to the font size of the parent element, so if the parent’s element has a font-size of 10px each em will now be equal to 10 px.
Here we declare a 10px font-size inside of the parent-box and set the child’s width and height equal to 5em so if the parent element has a 10px font-size that means that each em is worth 10px so our child element would be 50px * 50px
The thing with em is that they cascade, what does this mean? So if we had another element inside of the child element and also set its dimensions equal to 5em the second child will be 100px * 100px
This happens because when there is another element inside a child the second child will multiply the value times 2, crazy right? That is why we have to be careful when working with em.
Now rem is different than em because it takes its dimension based on the root font-size, not the parent. The word rem means “root em” this solves the problem we have with em were elements cascade, by taking its dimension based on the root the rem value will be the same throughout the whole file. So let’s see the same example but with rem.
So if we compare this example with the one above we can see that the font-size of the parent-box is now 30 but the first and second children have smaller sized font, also we can see that the elements don’t cascade, that is because the root is being declared with a font-size of 10px so whenever we use rem now it will always refer to 10px.
Absolute lengths don’t base their size on other factors or anything else in the page, parents, viewport, etc. they base themselves on static measurements
Inches, centimeters, and millimeters.
So I don’t feel like there is a lot to explain about these units of measurement. if you declare something to be 1in it will be 1in no matter what the size of your screen is. The same goes for centimeters and millimeters
Points & Picas
So points and picas are typographic terms. A point is 1/72 of an inch so it’s very small and a pica is 12 points or 1/6 of an inch.
And last but not least…
Now pixels are absolute lengths but their size may vary depending on what device you are, some devices have bigger pixels than others depending on their density and resolution.