CSS | Units

CSS has several different units for expressing the length and measurement. CSS units are needed to specify the measurement in stylesheet like padding:”5px”. Mainly there are two types of units in CSS.

  • Absolute Length
  • Relative Length

Absolute Length: It is not good for use on screen, cause screen size vary so much depending on the device used for that page it is recommended to use for print layout and where the output medium is known.
Absolute Length Units:

  • cm: centimeter
    Syntax:

       font-size: 0.5cm;
       line-height: 0.1cm;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS units</title>
            <style>
                .gfg {
                    font-size: 1.2cm;
                    font-weight:bold;
                }
                .geeks {
                    font-size: 0.5cm;
                    line-height: 0.1cm;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</gfg>
            <div class = "geeks">A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    css units

  • mm: milimeter
    Syntax:

       font-size: 5mm;
       line-height: 1mm;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS units</title>
            <style>
                .gfg {
                    font-size: 12mm;
                    font-weight:bold;
                }
                .geeks {
                    font-size: 5mm;
                    line-height: 1mm;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</gfg>
            <div class = "geeks">A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    css units

  • in: inches
    Note: inches (1in = 96px = 2.54cm)
    Syntax:

        font-size: 0.2in;
        line-height: 0.1in;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS units</title>
            <style>
                .gfg {
                    font-size: .5in;
                    font-weight:bold;
                }
                .geeks {
                    font-size: .2in;
                    line-height: .1in;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</gfg>
            <div class = "geeks">A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    css units

  • px: pixels
    Note: pixels (1px = 1/96th of 1in)
    Syntax:

       font-size: 20px;
       line-height: 10px;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS units</title>
            <style>
                .gfg {
                    font-size: 40px;
                    font-weight:bold;
                }
                .geeks {
                    font-size: 17px;
                    line-height: 5px;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</gfg>
            <div class = "geeks">A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    css units

  • pt:points
    Note: points (1pt = 1/72 of 1in)
    Syntax:

        font-size: 16pt;
        line-height: 8pt;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS units</title>
            <style>
                .gfg {
                    font-size: 35pt;
                    font-weight:bold;
                }
                .geeks {
                    font-size: 15pt;
                    line-height: 5pt;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</gfg>
            <div class = "geeks">A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    css units

  • pc: picas
    Note: picas (1pc = 12 pt)
    Syntax:

          font-size: 1pc;
          line-height: 0.5pc;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS units</title>
            <style>
                .gfg {
                    font-size: 3pc;
                    font-weight:bold;
                }
                .geeks {
                    font-size: 1.3pc;
                    line-height: .2pc;
                }
            </style>
        </head>
        <body>
            <div class = "gfg">GeeksforGeeks</gfg>
            <div class = "geeks">A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    css units

Relative Length: It is good for use on screen, if screen size varies so much depending on the device then these relative length units are perfect because it changes with the different rendering mediums.

Relative Length Units:

  • em: Relative to the font size of that element.
    Note: Here 2em meaning 2times the size of current font.
    Syntax:

        font-size: 10px;
        line-height: 2em;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>relative unit</title>
            <style>
                p {
                    font-size: 15px;
                    line-height: 2em;
                }
        </style>
        </head>
        <body>
            <p>GeeksforGeeks Line height: 2x10px = 20px</p>
            <p>GeeksforGeeks Line height: 2x10px = 20px</p>
            <p>GeeksforGeeks Line height: 2x10px = 20px</p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    em unit

  • ex: Relative to the X(axis)-height of the current font.
    Syntax:

    font-size: 1ex;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>relative unit</title>
            <style>
                p {
                    font-size: 40px;
                }
                span {
                    font-size: 1ex;
                }
            </style>
        </head>
        <body>
            <p>GeeksforGeeks:<span>A computer science
            portal for geeks</span></p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    ex unit image

  • ch: Relative to width of the 0.
    Syntax:

    font-size: 2ch;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>ch unit in CSS</title>
            <style>
                body {
                    font-size:50px;
                }
                div {
                    font-size: 1ch;
                }
            </style>
        </head>
        <body>
            <p>GeeksforGeeks</p>
            <div>A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    ch unit

  • rem: Relative to the browser base font-size.
    Syntax:

    font-size: 3rem;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>ch unit in CSS</title>
            <style>
                body {
                    font-size:4rem;
                }
                div {
                    font-size: 1.6rem;
                }
            </style>
        </head>
        <body>
            <p>GeeksforGeeks</p>
            <div>A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    ch unit

  • vw: Relative to 1% of the width of the viewport.
    Syntax:

    font-size: 10vw;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>vw unit</title>
            <style>
                h1 {
                    font-size: 4vw;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    unit image

  • vh: Relative to 1% of the height of the viewport.
    Syntax:

    font-size: 10vh;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <style>
                h1 {
                    font-size: 6vh;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    unit image

  • vmin: Relative to 1% of the viewport’s smaller dimension.
    Syntax:

    font-size: 10vmin;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>vmin unit</title>
            <style>
                h1 {
                    font-size: 8vmin;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
            <p>1vmin = 1vw or 1vh whichever is smaller.</p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    vmin unit

  • vmax: Relative to 1% of the viewport’s larger dimension.
    Syntax:

    font-size: 20vmax;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>vmax unit</title>
            <style>
                h1 {
                    font-size: 5vmax;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <p>A computer science portal for geeks</p>
            <p>1vmax = 1vw or 1vh whichever larger.</p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    vmax

  • %: % unit sets the font-size relative to the current font-size.
    Syntax:

    font-size: 250%;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
        <head>
            <title>CSS unit</title>
            <style>
                body {
                    font-size:250%;
                }
                div {
                    font-size: 17px;
                }
            </style>
        </head>
        <body>
            <p>GeeksforGeeks</p>
            <div>A computer science portal for geeks</div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    percentage unit



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.