CSS Length Value Units

    Every CSS property accepted a set of values. And those values could be pre-defined keywords such as auto, inherit, red, yellow, etc., or a numeric value with a unit such as 1px, 2%, 3cm, etc. Here in this tutorial, we will look at some of the most frequently used CSS units. Generally, units are used with the Length associated properties such as width, margin, font-size, etc. And when we define the value for such properties, we use numerical values with some unit, and there is no whitespace between the value and unit. Mostly all the length-associated properties accept positive numeric values, but some CSS properties can also accept negative numerical values.

    Types of Length Units

    Length units are divided into two types

    • Absolute Length units
    • Relative Length Units

    Absolute Length Units

    Absolute length units represent a fixed length for a property. cm, px, pt, pc, etc. are examples of absolute length units. Absolute Lengths units are not often used in Responsive Web-Page Designing because the browser's screen size varies from device to device.

    Value Unit Description Comparison
    cm Centimeters 1cm is equivalent to (96/2.54)px
    mm Millimeters 1mm is equivalent to 0.1cm
    Q Quarter-millimeters 1Q is equivalent to 1/40th of 1cm
    in Inches 1in is equivalent to 2.54cm and 96px
    pc Picas 1pc is equivalent to the (1/6)th of 1in
    pt Points 1pt is equivalent to (1/72)th of 1in
    px Pixels 1px is equivalent to (1/96)th of 1in

    Relative Length

    The relative length unit does not specify a fixed length; it just represents a relative value. And the relative value could be of the parent or viewport size. In Responsive Web-Designing Relative values have given more preference over absolute values. Because If a property has a relative value, its size can be changed according to the screen size.

    Relative Unit Description
    % Relative to the Parent element size.
    em Relative to the Font size of the parent element and 2em will represent two times the size or length of the parent property.
    ex It is relative to the x-height of the element font.
    ch It is relative to the width of zero (0).
    rem Relative to the font-size of the parent or root element.
    lh Relative to the line-height of the parent element.
    vw Represent relation to the 1% of the width of the viewport
    vh Represent relation to the 1% of the height of the viewport
    vmin Relative t0 1% of viewport's smaller dimension.
    vmax Relative to 1% of viewport's larger dimension.

    Summary

    • Units are used to define the size or length parameter of the value.
    • Units are generally used with the numeric value.
    • The absolute length specifies a fixed size.
    • Relative length unit size varies according to the parent or root element.
    • In Responsive Web, Designing Relative values are used more than Absolute.
    Previous Tutorial Next Tutorial