{"id":375815,"date":"2024-06-03T12:22:02","date_gmt":"2024-06-03T19:22:02","guid":{"rendered":"https:\/\/css-tricks.com\/?p=375815"},"modified":"2024-06-18T16:40:40","modified_gmt":"2024-06-18T23:40:40","slug":"css-length-units","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-length-units\/","title":{"rendered":"CSS Length Units"},"content":{"rendered":"\n
\n

Overview<\/h2>\n\n\n

Many CSS properties accept numbers as values. Sometimes those are whole numbers. Sometimes they’re decimals and fractions. Other times, they’re percentages. Whatever they are, the unit that follows a number determines the number’s computed length<\/a>. And by “length” we mean any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things!<\/p>\n\n\n\n

At the time of this writing, the CSS Values and Units Module Level 4 specification<\/a> defines a bunch of different CSS units \u2014 and many of those are relatively<\/em> new (this pun will make sense later).<\/p>\n<\/div>\n\n\n\n

Quick Reference<\/h2>\n\n\n
\n
\n
\n \n Absolute units <\/summary>\n \n\n
Unit<\/th>Name<\/th><\/tr><\/thead>
cm<\/code><\/td>Centimeters<\/td><\/tr>
mm<\/code><\/td>Millimeters<\/td><\/tr>
Q<\/code><\/td>Quarter-millimeters<\/td><\/tr>
in<\/code><\/td>Inches<\/td><\/tr>
pc<\/code><\/td>Picas<\/td><\/tr>
pt<\/code><\/td>Points<\/td><\/tr>
px<\/code><\/td>Pixels<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n\n\n\n
\n
\n \n Font units <\/summary>\n \n\n
Unit<\/th>Relative to…<\/th><\/tr><\/thead>
em<\/td>The font size of the element, or its nearest parent container<\/td><\/tr>
ex<\/td>The 0-height of the element\u2019s font\u00a0<\/td><\/tr>
cap<\/td>The cap height (the nominal height of capital letters) of the element\u2019s font <\/td><\/tr>
ch<\/td>The width of the 0<\/code> character of the font in use<\/td><\/tr>
ic<\/td>The average width of a full glyph of the font in use, as represented by the \u201c\u6c34\u201d (U+6C34<\/code>) glyph<\/td><\/tr>
rem<\/td>The font-size<\/code> value that’s set on the root (html<\/code>) element<\/td><\/tr>
lh<\/td>The line-height<\/code> value that’s set on the element <\/td><\/tr>
rlh<\/td>The line-height<\/code> that’s set on the root (html<\/code>) element <\/td><\/tr>
vw<\/td>1% of viewport\u2019s width<\/td><\/tr>
vh<\/td>1% of viewport\u2019s height<\/td><\/tr>
vi<\/td>1% of viewport\u2019s size in the root element\u2019s inline axis<\/td><\/tr>
vb<\/td>1% of viewport\u2019s size in the root element\u2019s block axis<\/td><\/tr>
vmin<\/td>Equal to 1% of the vw<\/code> or vh<\/code>, whichever is smaller<\/td><\/tr>
vmax<\/td>Equal to 1% of the vw<\/code> or vh<\/code>, whichever is larger<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n<\/div>\n\n\n\n
\n
\n
\n \n Viewport units <\/summary>\n \n\n
<\/th><\/th><\/tr><\/thead>
vw<\/code><\/td>1% of viewport\u2019s width<\/td><\/tr>
vh<\/code><\/td>1% of viewport\u2019s height<\/td><\/tr>
vi<\/code><\/td>1% of viewport\u2019s size in the root element\u2019s inline axis<\/td><\/tr>
vb<\/code><\/td>1% of viewport\u2019s size in the root element\u2019s block axis<\/td><\/tr>
vmin<\/code><\/td>1% of the vw<\/code> or vh<\/code>, whichever is smaller<\/td><\/tr>
vmax<\/code><\/td>1% of the vw<\/code> or vh<\/code>, whichever is larger<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n\n\n\n
\n
\n \n Container units <\/summary>\n \n\n
Unit<\/th>Relative to<\/th><\/tr><\/thead>
cqw<\/code><\/td>1% of a query container’s width<\/td><\/tr>
cqh<\/code><\/td>1% of a query container’s height<\/td><\/tr>
cqi<\/code><\/td>1% of a query container’s inline size<\/td><\/tr>
cqb<\/code><\/td>1% of a query container’s block size<\/td><\/tr>
cqmin<\/code><\/td>The smaller value of cqi<\/code> or cqb<\/code><\/td><\/tr>
cqmax<\/code><\/td>The larger value of cqi<\/code> or cqb<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n<\/div>\n\n\n\n
\n
\n
\n \n Angle units <\/summary>\n \n\n
Unit<\/th>Description<\/th><\/tr><\/thead>
deg<\/code><\/td>There are 360 degrees in a full circle.<\/td><\/tr>
grad<\/code><\/td>There are 400 gradians in a full circle.<\/td><\/tr>
rad<\/code><\/td>There are 2\u03c0 radians in a full circle.<\/td><\/tr>
turn<\/code><\/td>There is 1 turn in a full circle.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n\n\n\n
\n
\n \n Time units <\/summary>\n \n\n
Unit<\/th>Description<\/th><\/tr><\/thead>
s<\/code><\/td>There are 60 seconds in a minute, but there is no unit for minutes.<\/td><\/tr>
ms<\/code><\/td>There are 1,000 milliseconds in a second.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n<\/div>\n\n\n\n
\n
\n
\n \n Fractional units <\/summary>\n \n\n
Unit<\/th>Description<\/th><\/tr><\/thead>
fr<\/code><\/td>One fraction of the free space in a grid container.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n\n\n\n
\n
\n \n Resolution units <\/summary>\n \n\n
Unit<\/th>Description<\/th><\/tr><\/thead>
dpi<\/code><\/td>Dots per inch<\/td><\/tr>
dpcm<\/code><\/td>Dots per centimeter<\/td><\/tr>
dppx<\/code>, x<\/code><\/td>Dots per pixel unit<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n<\/div>\n\n\n\n
\n \n Frequency units <\/summary>\n \n\n
Unit<\/th>Description<\/th><\/tr><\/thead>
Hz<\/code><\/td>Represents the number of occurrences per second<\/td><\/tr>
kHz<\/code><\/td>One kiloHertz is equal to 1000 Hertz.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<\/details><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\n
\n
\n \n

Table of contents<\/h3>\n <\/summary>\n \n
    \n\n\n
  • Introduction<\/a>\n\n<\/li>\n
  • Types of numbers<\/a>\n\n<\/li>\n
  • Absolute units<\/a>\n\n<\/li>\n
  • Relative units<\/a>\n\n<\/li>\n
  • What about unit-less numbers?<\/a>\n\n<\/li>\n
  • We can create our own custom units!<\/a>\n\n<\/li>\n
  • When to use one unit over another<\/a>\n\n\n<\/li>\n\n<\/li>\n\n<\/li>\n\n<\/li>\n\n
  • Examples<\/a>\n\n<\/li>\n
  • Related Articles<\/a>\n<\/li><\/ul>\n\n<\/details><\/div>\n\n\n\n

    Introduction<\/h3>\n\n\n

    You’re going to see a lot numbers in CSS. Here are a few examples?<\/p>\n\n\n\n

    \/* Integers *\/\n1\n\n\/* Pixels *\/\n14px\n\n\/* em *\/\n1.5em\n\n\/* rem *\/\n3rem\n\n\/* Percentage *\/\n50%\n\n\/* Characters *\/\n650ch\n\n\/* Viewport units *\/\n100vw\n80vh\n50dvh\n\n\/* Container units *\/\n100cqi\n50cqb<\/code><\/pre>\n\n\n\n
    While these all mean different things, they essentially do the same thing: define an element’s dimensions in CSS<\/strong>. We need units in CSS because they determine how to size elements on a page, whether it’s the height<\/code> of a box, the width<\/code> of an image, the font-size<\/code> of a heading, the margin<\/code> between two elements, how long an animation runs, etc. Without them, the browser would have no way of knowing how to apply numbers to an element.<\/p>\n\n\n\n
    So, what the heck is<\/em> px<\/code>? What’s up with this thing called rem<\/code>? How are these different than other length units? The unit defines what type of number we’re dealing with, and each one does something different, giving us lots of ways to size things in CSS.<\/strong><\/p>\n\n\n\n
    \n\n\n
    Types of numbers<\/h3>\n\n\n
    You may think a number is just a number, and you’re not wrong. Numbers are numbers! But we can distinguish between a few different types<\/em> of numbers, which is helpful context for discussing the different types of units we attach them to since “number” can mean, well, a number<\/em> of different things.<\/p>\n\n\n\n
      \n
    • Integers<\/strong> (literally a unit-less number, e.g. 3<\/code>)<\/li>\n\n\n\n
    • Numbers<\/strong> (same as an integer, only measured in decimals, e.g. 3.2<\/code>)<\/li>\n\n\n\n
    • Dimensions<\/strong> (either a number or integer with a unit, e.g. 3.2rem<\/code>)<\/li>\n\n\n\n
    • Ratios<\/strong> (the quotient between two divided numbers, e.g. 3\/2<\/code>)<\/li>\n\n\n\n
    • Percentages<\/strong> (e.g. 3%<\/code>)<\/li>\n<\/ul>\n\n\n\n
      Got that? They’re all numbers but with nuances that make them ever-so-slightly different. <\/p>\n\n\n\n
      From here, we can think of numbers in CSS as falling into two specific types of units<\/em>: absolute<\/strong> and relative<\/strong>. Let’s start things off our deep dive on CSS length units by breaking those down.<\/p>\n\n\n\n
      \n\n\n
      Absolute units<\/h3>\n\n\n
      An absolute unit<\/strong> is like Bill Murray in the movie Groundhog Day<\/em><\/a>: it’s always the same. In other words, whatever the number is, that’s exactly how it computes in the browser regardless of how other elements are sized.<\/p>\n\n\n\n
      The most common absolute value you’ll see is the pixel<\/strong> value. It’s sort of hard to define, but a pixel is the smallest<\/em> building block of a graphical display, like a computer screen. And it’s based on the resolution of the screen. So, if you’re on a super high-resolution screen, a pixel will be smaller than it would be on a low-resolution screen, as the resolution can pack more pixels into a smaller amount of space for higher clarity. But look at the example below. All of the boxes are sized with pixels, so you can get a sense of how large 50px<\/code> is compared to 250px<\/code>.<\/p>\n\n\n\n