CSS Units

CSS Units

Every CSS property has a type of value it can accept such as a predefined keyword, a URL, or a number. When assigning a numerical value to an element, we must specify a unit of measurement for that value. If we don't, a browser will not know what to do without specific property. CSS offers a number of different units for expressing length. The units can either be relative or absolute.

CSS has several different units for expressing a length for an element. For example, the font size of a text, the button size etc.. CSS Units are used to control the length of the elements in the html web page

CSS properties has some length values like width padding the size of a text like font-size the width of a page or a table etc...

The length of a css property is defined using units such as 2px 5em etc..

CSS properties can also contain the negative values as well.

CSS has two different types of length units such as relative and absolute

CSS Relative Units

The ex unit is equal to the current fonts x-height . which is often times the height of the lowercase letter x.

1ex = 0.5em in many fonts.

Different fonts have different heights for ex even if their font size is the same.

Using the above css ex relative length unit, the font-size of the paragraph will be 3 times bigger than the normal font-size

The em is a popular unit of measurement that is equal to the computed value of the font size property of the element . When we define our font size an em, one em is equal to the inherited font size,

If we haven't set the font-size anywhere on the page, then it's the browsers default, which is 16 pixels. So by default 1 em equals 16 pixels, 2 ems is equal to 32 pixels and so forth. If you set our page's font size to 1 em, it is exactly the same as using 16 pixels for our base font size.

What if we need to make the paragraph font size smaller--let's say equal to 12 pixels. To determine the em value, we'll divide the desired element value which is our paragraph by the parent element font size and pixels, which again in this case is the browser's default size--16 pixels. So 12 divided by 16 gives us a value of 0.75. So for our font size, we will specify 0.75 em as our value.

The css relative em unit is a very useful unit in CSS because it can adapt automatically to the font that the reader chooses to use. An important thing to know when font sizing with em unit is that there is a compounding effect in nested elements.

The css relative rem unit which stands for root em always represent the font size of the root element of the page, which is usually the HTML element. If a font size is specified for the HTML element then all the rem units on the page are relative to that font size.

if we change the font-size of our paragraph from 1 em to 1 rem, the font size of the paragraph will no longer relative to its parent div element. By using the rem unit, we avoid the compounding effect

CSS recently added a new set of units for resizing elements, these units vw, vh, and vmin are referred to as viewport-relative units because they eliminate the dependency on parent elements and instead allow sizing purely based on the viewport size. Each unit's value is equal to 1% or 1100th of the size of the viewport.

Vw stands for viewport width. One vw is equal to 1100th or 1% of the viewport width.

In the above example each div has a width that is 15% of the viewport width. And as you can see, they only resize when we reduce or expand the viewport width.

Much like the vw unit, the vh or viewport height unit is equal to 1% or 1100th of the viewport height. So if we change the div width value to 15 vh, then widths of the div elements will be equal to 15% of the viewport height

The vmin unit is unit is 1100th or 1% of the minimum value between the height and the width of the viewport.

CSS Absolute Length Units

Absolute length units are fixed in relation to each other. They represent a physical measurement and are only useful when the physical properties of the output medium are known.

If you are working with the screens then absolute units are not recommended , because screen sizes vary at some point of the time. However, they can be used if the output medium is known

Browser Compatability

Let's see the browser support for each of the units

The numbers in the table specify the first browser version that fully supports the length unit.

Practice with Our Interactive Live Editors and Take your CSS Skills to the next level

Other Advanced CSS Units you might want to learn

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM