Measurement units¶

In CSS, the size (element fonts etc.) can be represented in several different ways. In this section we will present the most popular ones:

Pixels¶

The size in pixels is described with px. When deciding on pixels, the element size will be fixed, regardless of external factors (such as device type or browser settings).

div {
    width: 100px;
}

Percentages¶

If we decide to present a dimension in percent, i.e. with a % sign, then the size is relative to the parent's dimensions, e.g:

div {
    width: 50%; /* half a parent's width */
}

REM¶

To determine the size relative to the root of the HTML tree (or browser settings), we use rem. If you give the element any font size or font size equal to 1rem, This will mean that this dimension is equal to the font size of the HTML tree root. The example below shows how to increase the base font size by 50%:

html {
  font-size: 10px;
}

.outer {
  font-size: 1.5rem; /* 1.5 * 10px = 15px */
}

EM¶

A size designated as em, like rem, is a relative unit. It refers to the size of a direct parent. If, for example, you give the element a size, or set the font size to 1em, this will mean that the size is equal to the size of the parent (or the font used on the parent). The following example shows the use of a size with em:

<div class="parent">
    Some parent text that will have size of 10px
    <div class="child">
        Child text that will be bigger that font in father
    </div>
</div>

.parent {
  font-size: 10px;
}

.child {
  font-size: 1.5em; /* 1.5 * 10px = 15px */
}

NOTE: Our website will be more "resistant" to changes if the sizes are set with rem instead of em.

Viewport Width and Viewport Height¶

In short, vw and vh respectively. Both of these markings refer to the width and height of the browser window. The value 1vw means one hundredth of the window width and 1vh means one hundredth of the window height, e.g:

div {
  width: 50vw; /* Half the width of the browser window */
  height: 100vh; /* The whole height of the browser window */
}