CSS – Measurement Units [2022]

By Geoff Griffiths @mmatraining1980

https://www.udemy.com/course/css-bootcamp-master-in-css-including-css-grid-flexbox/learn/lecture/10772490#overview

Some HTML elements have default sizes. For example, default for paragraph (<p>) text, is 16px.

You can change the size of text with the “font-size:” property in CSS

Relative Sizes in CSS

Relative sizes and measurements are a bit confusing to us newbies.

The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.

https://www.w3.org/Style/Examples/007/units.en.html#:~:text=The%20em%20is%20simply%20the,sizes%20will%20be%20in%20proportion.

Using an em value creates a dynamic or computed font size (historically the em unit was derived from the width of a capital “M” in a given typeface.). The numeric value acts as a multiplier of the font-size property of the element on which it is used. Consider this example:

p {
  font-size: 2em;
}

In this case, the font size of <p> elements will be double the computed font-size inherited by <p> elements. By extension, a font-size of 1em equals the computed font-size of the element on which it is used.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

If a font-size has not been set on any of the <p>‘s ancestors, then 1em will equal the default browser font-size, which is usually 16px.

So, by default 1em is equivalent to 16px, and 2em is equivalent to 32px.

If you were to set a font-size of 20px on the <body> element say, then 1em on the <p> elements would instead be equivalent to 20px, and 2em would be equivalent to 40px.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the <body> of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Percentage

When the font-size is specified as a percentage, it is relative to the parent element’s font size

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

You can use percentage values. They act like em values.

The value is relative to the parent‘s font-size.
As a result, the value will cascade if used on child elements.

Rem

The value is relative to the root element‘s font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

https://cssreference.io/property/font-size/

VH – Viewport Height

The viewport is the browser window size.

1vh will mean that the element or font will take up 1% of the viewport/browser window.

height:100vh, will mean the element, font etc will be 100% and take up the height of the entire browser window

Viewport width, is “vw”

You can set width, for example the width of a background to a percentage of the width of the user’s browser window. For example
width:50vw; will take up 50% of the width of the screen.

If you want to learn more, video below is decent: