lengths

The CSS data type apples to distant measurements for the following CSS properties: width, height, margin, padding, font-size, border-width, text-shadow etc..
There are two types of length units: relative and absolute.

Relative units

Font-relative lengths:

  1. em
  2. ex
  3. ch
  4. rem

Viewport-percentage length:

  1. vh
  2. vw
  3. vmin
  4. vmax

em
Relative to the font-size of the parent element. 3 em means 3 times the size of the font that has its parent.

ex
Relative to the x-height of the current font.

ch
Relative to width of the “0” (zero, the Unicode character U+0030) in the element’s font.

rem
Relative to font-size of the root element (html).

em and rem units are used to create scalable layouts.

Viewport-percentage

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of document.

vw
Relative to 1% of the width of the viewport

vh
Relative to 1% of the height of the viewport

vmin
Relative to 1% of viewport’s smaller dimension: between the height and the width of the viewport.

vmax
Relative to 1% of vieport’s larger dimension: between the height and the width of the viewport.

Absolute units

  • in – inches 1in = 2.54cm = 96px
  • cm – centimeters 1cm = 37.8px
  • mm – milimeters 1 mm = 0.1cm = 3.78px
  • pt – points – the points used by CSS are equal to 1/72nd of 1in.
  • pc – picas – 1pc = 12pt.
  • px – pixel – 1px = 0.75pt

px
Pixels have nothing to do with the screen pixels. Pixels (px) are relative to the viewing device: low-dpi devices or high resolution screens. Now we have CSS px which is a Angular Measurement.

Examples

The em unit

The HTML code


<div class="box-units units-parent">
    <div class="box-units units-em">The CSS....</div>
</div>

The CSS properties

div.units-parent {
    font-size: 10px;
}
div.units-em {
    font-size: 2em;
}

The result

The CSS rule for this element is: font-size: 2em.
The font-size of the parent element (div) is equal 10px, so 2em is equal 2 * 10 = 20px.

The rem unit

The HTML code

<div class="box-units units-parent">
    <div class=" units-rem">The CSS rule....</div>
</div>

The CSS code


div.units-rem {
    font-size: 2rem;
}

The result

The CSS rule for the html element is: font-size: 100%, so the font size of the html element is equal to the default value of the browser – .
The CSS rule for this div element is: font-size: 2rem; so the font size is equle

Viewport-percentage lengths

Data about viewport dimenstions:

vw

The CSS property

div {
    font-size:4vw;
}

vh

The CSS property

div {
    font-size:4vh;
}

vmin

The CSS property

div {
    font-size:4vmin;
}

vmax

The CSS property

div {
    font-size:4vmax;
}

Resources
MDN

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.