Skip to content
Related Articles

Related Articles

CSS Units

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 05 Nov, 2021

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 varies 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: This example illustrates the CSS units by specifying the length unit in cm.

HTML




<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</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:
css units
mm: millimeter
Syntax:
   font-size: 5mm;
   line-height: 1mm;
Example: This example illustrates the CSS units by specifying the length unit in mm.
HTML



<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</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>
Output:
css units
in: inches
Note: inches (1in = 96px = 2.54cm) 
Syntax:
    font-size: 0.2in;
    line-height: 0.1in;
Example: This example illustrates the CSS units by specifying the length unit in inches.
HTML



<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</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>
Output:
css units
px: pixels
Note: pixels (1px = 1/96th of 1in) 
Syntax:
   font-size: 20px;
   line-height: 10px;
Example: This example illustrates the CSS units by specifying the length unit in pixels.
HTML



<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</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>
Output:
css units
pt: points
Note: points (1pt = 1/72 of 1in) 
Syntax:
    font-size: 16pt;
    line-height: 8pt;
Example: This example illustrates the CSS units by specifying the length unit in points.
HTML



<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</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>
Output:
css units
pc: picas
Note: picas (1pc = 12 pt) 
Syntax:
      font-size: 1pc;
      line-height: 0.5pc;
Example: This example illustrates the CSS units by specifying the length unit in pc.
HTML



<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</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>
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 means 2 times the size of the current font. 
Syntax:
    font-size: 10px;
    line-height: 2em;
Example: This example illustrates the CSS units by specifying the length unit in em.
HTML



<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>
Output:
em unit
ex: Relative to the X(axis)-height of the current font.
Syntax:
font-size: 1ex;
Example: This example illustrates the CSS units by specifying the length unit in ex.
HTML



<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>
Output:
ex unit image
ch: Relative to the width of the 0.
Syntax:
font-size: 2ch;
Example: This example illustrates the CSS units by specifying the length unit in ch.
HTML



<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>
Output:
ch unit
rem: Relative to the browser base font-size.
Syntax:
font-size: 3rem;
Example: This example illustrates the CSS units by specifying the length unit in rem.
HTML



<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>
Output:
ch unit
vw: Relative to 1% of the width of the viewport.
Syntax:
font-size: 10vw;
Example: This example illustrates the CSS units by specifying the length unit in vw.
HTML



<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>
Output:
unit image
vh: Relative to 1% of the height of the viewport.
Syntax:
font-size: 10vh;
Example: This example illustrates the CSS units by specifying the length unit in vh.
HTML



<html>
 
<head>
    <style>
    h1 {
        font-size: 6vh;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
</body>
 
</html>
Output:
unit image
vmin: Relative to 1% of the viewport’s smaller dimension.
Syntax:
font-size: 10vmin;
Example: This example illustrates the CSS units by specifying the length unit in vmin.
HTML



<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>
Output:
vmin unit
vmax: Relative to 1% of the viewport’s larger dimension.
Syntax:
font-size: 20vmax;
Example: This example illustrates the CSS units by specifying the length unit in vmax.
HTML



<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>
Output:
vmax
%: % unit sets the font-size relative to the current font-size.
Syntax:
font-size: 250%;
Example: This example illustrates the CSS units by specifying the length unit in percentage.
HTML



<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>
Output:
percentage unit
Supported Browser:
  • Google Chrome
  • Internet Explorer
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

My Personal Notes
arrow_drop_up
Previous
CSS | Website Layout
Next

CSS | Specificity
Recommended Articles
Page :
How to Set Calc Viewport Units Workaround in CSS ?
29, Jun 20
CSS units - %, em, rem, px, vh, vw
26, Oct 21
Difference between em and rem units in CSS
16, Sep 21
Pure CSS applying Padding and Borders to Grid Units
06, Jul 22
Explain all the measurement units in CSS3
28, Oct 21
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS Float
11, Jun 18
Tailwind CSS Text Color
18, Feb 21
CSS Selectors Complete Reference
18, Jun 19
CSS Margins and Padding
23, May 18
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
Foundation CSS Slider
11, Mar 22
CSS | Percentage Value
02, Jun 20
What is first child in CSS ?
15, Mar 21
Primer CSS Flexbox Align Items
21, Apr 22
Primer CSS Grow x Animation
21, Apr 22
How to hide an element when printing a web page using CSS?
07, Dec 18
CSS | :root Selector
15, Nov 18
Primer CSS Progress with multiple values
21, Apr 22
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Sabya_Samadder
@Sabya_Samadder
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!