Sizing Units | web.dev

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/learn/css/sizing"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/learn/css/sizing" /><link rel="alternate" hreflang="x-default" href="https://web.dev/learn/css/sizing" /><link rel="alternate" hreflang="ar" href="https://web.dev/learn/css/sizing?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/learn/css/sizing?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/learn/css/sizing?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/learn/css/sizing?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/learn/css/sizing?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/learn/css/sizing?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/learn/css/sizing?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/learn/css/sizing?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/learn/css/sizing?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/learn/css/sizing?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/learn/css/sizing?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/learn/css/sizing?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/learn/css/sizing?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/learn/css/sizing?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/learn/css/sizing?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/learn/css/sizing?hl=ru" /><link rel="alternate" hreflang="es" href="https://web.dev/learn/css/sizing?hl=es" /><link rel="alternate" hreflang="es-419" href="https://web.dev/learn/css/sizing?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/learn/css/sizing?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/learn/css/sizing?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/learn/css/sizing?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/learn/css/sizing" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/learn/css/sizing" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=ru" /><link rel="alternate" hreflang="es-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=es" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/learn/css/sizing?hl=vi" /><title>Sizing Units  |  web.dev</title> <meta property="og:title" content="Sizing Units  |  web.dev"><meta name="description" content="In this module find out how to size elements using CSS, working with the flexible medium of the web."> <meta property="og:description" content="In this module find out how to size elements using CSS, working with the flexible medium of the web."><meta property="og:url" content="https://web.dev/learn/css/sizing"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="course" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner" data-nosnippet> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" aria-label="Resources, selected" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Resources" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" > Case Studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/learn" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Resources </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://web.dev/learn/privacy" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/privacy" track-type="nav" track-metadata-position="nav - privacy" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" > Privacy </a> </tab> <tab > <a href="https://web.dev/learn/accessibility" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/accessibility" track-type="nav" track-metadata-position="nav - accessibility" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" > Accessibility </a> </tab> <tab > <a href="https://web.dev/learn/html" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/html" track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/learn/images" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/images" track-type="nav" track-metadata-position="nav - images" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" > Images </a> </tab> <tab > <a href="https://web.dev/learn/design" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/design" track-type="nav" track-metadata-position="nav - responsive design" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" > Responsive Design </a> </tab> <tab > <a href="https://web.dev/learn/forms" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/forms" track-type="nav" track-metadata-position="nav - forms" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" > Forms </a> </tab> <tab > <a href="https://web.dev/learn/pwa" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/pwa" track-type="nav" track-metadata-position="nav - pwa" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" > PWA </a> </tab> <tab class="devsite-active"> <a href="https://web.dev/learn/css" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/css" track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" aria-label="CSS, selected" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/learn/performance" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/performance" track-type="nav" track-metadata-position="nav - performance" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" > Performance </a> </tab> <tab > <a href="https://web.dev/learn/testing" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/testing" track-type="nav" track-metadata-position="nav - testing" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" > Testing </a> </tab> <tab > <a href="https://web.dev/learn/javascript" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/learn/javascript" track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Resources" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Resources </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/learn/privacy" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Privacy" track-name="privacy" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Accessibility" track-name="accessibility" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/images" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Images" track-name="images" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Images" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Images </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/design" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Responsive Design" track-name="responsive design" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Responsive Design" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Responsive Design </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/forms" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Forms" track-name="forms" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Forms" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Forms </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/pwa" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: PWA" track-name="pwa" data-category="Site-Wide Custom Events" data-label="Responsive Tab: PWA" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PWA </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> CSS </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Performance" track-name="performance" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/testing" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Testing" track-name="testing" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Testing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Testing </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/learn/css/welcome" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/welcome" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/welcome" ><span class="devsite-nav-text" tooltip>Welcome to Learn CSS!</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/box-model" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/box-model" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/box-model" ><span class="devsite-nav-text" tooltip>Box Model</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/selectors" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/selectors" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/selectors" ><span class="devsite-nav-text" tooltip>Selectors</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/the-cascade" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/the-cascade" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/the-cascade" ><span class="devsite-nav-text" tooltip>The cascade</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/specificity" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/specificity" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/specificity" ><span class="devsite-nav-text" tooltip>Specificity</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/inheritance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/inheritance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/inheritance" ><span class="devsite-nav-text" tooltip>Inheritance</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/color" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/color" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/color" ><span class="devsite-nav-text" tooltip>Color</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/sizing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/sizing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/sizing" ><span class="devsite-nav-text" tooltip>Sizing Units</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/layout" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/layout" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/layout" ><span class="devsite-nav-text" tooltip>Layout</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/flexbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/flexbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/flexbox" ><span class="devsite-nav-text" tooltip>Flexbox</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/grid" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/grid" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/grid" ><span class="devsite-nav-text" tooltip>Grid</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/logical-properties" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/logical-properties" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/logical-properties" ><span class="devsite-nav-text" tooltip>Logical Properties</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/spacing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/spacing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/spacing" ><span class="devsite-nav-text" tooltip>Spacing</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/pseudo-elements" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/pseudo-elements" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/pseudo-elements" ><span class="devsite-nav-text" tooltip>Pseudo-elements</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/pseudo-classes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/pseudo-classes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/pseudo-classes" ><span class="devsite-nav-text" tooltip>Pseudo-classes</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/borders" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/borders" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/borders" ><span class="devsite-nav-text" tooltip>Borders</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/shadows" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/shadows" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/shadows" ><span class="devsite-nav-text" tooltip>Shadows</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/focus" ><span class="devsite-nav-text" tooltip>Focus</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/z-index" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/z-index" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/z-index" ><span class="devsite-nav-text" tooltip>Z-index and stacking contexts</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/functions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/functions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/functions" ><span class="devsite-nav-text" tooltip>Functions</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/gradients" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/gradients" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/gradients" ><span class="devsite-nav-text" tooltip>Gradients</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/animations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/animations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/animations" ><span class="devsite-nav-text" tooltip>Animations</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/filters" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/filters" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/filters" ><span class="devsite-nav-text" tooltip>Filters</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/blend-modes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/blend-modes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/blend-modes" ><span class="devsite-nav-text" tooltip>Blend Modes</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/lists" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/lists" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/lists" ><span class="devsite-nav-text" tooltip>Lists</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/transitions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/transitions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/transitions" ><span class="devsite-nav-text" tooltip>Transitions</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/overflow" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/overflow" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/overflow" ><span class="devsite-nav-text" tooltip>Overflow</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/backgrounds" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/backgrounds" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/backgrounds" ><span class="devsite-nav-text" tooltip>Backgrounds</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/typography" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/typography" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/typography" ><span class="devsite-nav-text" tooltip>Text and typography</span></a></li> <li class="devsite-nav-item"><a href="/learn/css/conclusion" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /learn/css/conclusion" track-type="bookNav" track-name="click" track-metadata-eventdetail="/learn/css/conclusion" ><span class="devsite-nav-text" tooltip>Conclusion and next steps</span></a></li> </ul> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Chrome is back at Google I/O on May 20-21! <a href="https://io.google/2025/register/?utm_source=devsite&utm_medium=embedded_marketing&utm_campaign=wdd&utm_content=">Register now</a> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="web.dev" > web.dev </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Resources </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/learn/css" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="" > CSS </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Sizing Units <div class="devsite-actions" data-nosnippet><devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip></div> </h1> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <h5 id="the-css-podcast---008:-sizing-units" data-text=" The CSS Podcast - 008: Sizing Units " tabindex="-1"> <a href="https://thecsspodcast.libsyn.com/tcp-css-podcast-episode-008" target="_blank">The CSS Podcast - 008: Sizing Units </a> </h5> <p><audio controls src="https://traffic.libsyn.com/secure/thecsspodcast/TCP_CSS_Podcast_Episode_008_v1.0.mp3?dest-id=1891556"> </audio></p> <p>The web is a responsive medium, but sometimes you want to control its dimensions to improve the overall interface quality. A good example of this is limiting line lengths to improve readability. How would you do that in a flexible medium like the web?</p> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/bGgEGxj?height=500&theme-id=light&default-tab=css%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen bGgEGxj by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>For this case, you can use a <code translate="no" dir="ltr">ch</code> unit, which is equal to the width of a "0" character in the rendered font at its computed size. This unit allows you to limit the width of text with a unit that's designed to size text, which in turn, allows predictable control regardless of the size of that text. The <code translate="no" dir="ltr">ch</code> unit is one of a handful of units that are helpful for specific contexts like this example.</p> <h2 id="numbers" data-text="Numbers" tabindex="-1">Numbers</h2> <p>Numbers are used to define <code translate="no" dir="ltr">opacity</code>, <code translate="no" dir="ltr">line-height</code> and even for color channel values in <code translate="no" dir="ltr">rgb</code>. Numbers are unitless integers (1, 2, 3, 100) and decimals (.1, .2, .3).</p> <p>Numbers have meaning depending on their context. For example, when defining <code translate="no" dir="ltr">line-height</code>, a number is representative of a ratio if you define it without a supporting unit:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">p</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">font-size</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">24</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">line-height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1.5</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/yLgYZRK?height=500&theme-id=light&default-tab=css%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen yLgYZRK by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>In this example, <code translate="no" dir="ltr">1.5</code> is equal to <strong>150%</strong> of the <code translate="no" dir="ltr">p</code> element's <strong>computed pixel font size</strong>. This means that if the <code translate="no" dir="ltr">p</code> has a <code translate="no" dir="ltr">font-size</code> of <code translate="no" dir="ltr">24px</code>, the line height will be computed as <code translate="no" dir="ltr">36px</code>.</p> <aside class="note"><b>Note: </b> It's a good idea to use a unitless value for <code translate="no" dir="ltr">line-height</code>, rather than specifying a unit. As you learned in the <a href="/learn/css/inheritance">inheritance module</a>, <code translate="no" dir="ltr">font-size</code> can be inherited. Defining a unitless <code translate="no" dir="ltr">line-height</code> keeps the line-height relative to the font size. This provides a better experience than, say, <code translate="no" dir="ltr">line-height: 15px</code>, which will not change and might look strange with certain font sizes. </aside> <p>Numbers can also be used in the following places:</p> <ul> <li>When setting values for filters: <code translate="no" dir="ltr">filter: sepia(0.5)</code> applies a <code translate="no" dir="ltr">50%</code> sepia filter to the element.</li> <li>When setting opacity: <code translate="no" dir="ltr">opacity: 0.5</code> applies a <code translate="no" dir="ltr">50%</code> opacity.</li> <li>In color channels: <code translate="no" dir="ltr">rgb(50, 50, 50)</code>, where the values 0-255 are acceptable to set a color value. <a href="/learn/css/color">See color lesson</a>.</li> <li>To transform an element: <code translate="no" dir="ltr">transform: scale(1.2)</code> scales the element by 120% of its initial size.</li> </ul> <h2 id="percentages" data-text="Percentages" tabindex="-1">Percentages</h2> <p>When using a percentage in CSS you need to know how the percentage is calculated. For example,<code translate="no" dir="ltr">width</code> is calculated as a percentage of the available width in the parent element.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">300</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">100</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">p</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">50</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/ZELbwwj?height=500&theme-id=light&default-tab=css%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen ZELbwwj by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>In the above example, the width of <code translate="no" dir="ltr">div p</code> is <code translate="no" dir="ltr">150px</code>, assuming that the layout uses the default <code translate="no" dir="ltr">box-sizing: content-box</code>.</p> <p>If you set <code translate="no" dir="ltr">margin</code> or <code translate="no" dir="ltr">padding</code> as a percentage, they will be a portion of the <strong>parent element's width</strong>, regardless of direction.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">300</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">100</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">p</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">margin-top</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">50</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c">/* calculated: 150px */</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">padding-left</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">50</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c">/* calculated: 150px */</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/WNRQPqX?height=500&theme-id=light&default-tab=css%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen WNRQPqX by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>In the above snippet, both the <code translate="no" dir="ltr">margin-top</code> and <code translate="no" dir="ltr">padding-left</code> will compute to <code translate="no" dir="ltr">150px</code>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">300</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">100</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">p</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">50</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c">/* calculated: 150px */</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">transform</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">translateX</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-mi">10</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">);</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c">/* calculated: 15px */</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/xxgwBxv?height=500&theme-id=light&default-tab=css%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen xxgwBxv by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>If you set a <code translate="no" dir="ltr">transform</code> value as a percentage, it is based on the element with the transform set. In this example, the <code translate="no" dir="ltr">p</code> has a <code translate="no" dir="ltr">translateX</code> value of <code translate="no" dir="ltr">10%</code> and a <code translate="no" dir="ltr">width</code> of <code translate="no" dir="ltr">50%</code>. First, calculate what the width will be: <code translate="no" dir="ltr">150px</code> because it is <strong>50% of its parent's width</strong>. Then, take <code translate="no" dir="ltr">10%</code> of <code translate="no" dir="ltr">150px</code>, which is <code translate="no" dir="ltr">15px</code>.</p> <aside class="key-term"><b>Key term: </b> The transform property allows you alter an element's appearance and position by rotating, skewing, scaling and translating it. This can be done in a 2D and 3D space. </aside> <h2 id="dimensions_and_lengths" data-text="Dimensions and lengths" tabindex="-1">Dimensions and lengths</h2> <p>If you attach a unit to a number, it becomes a dimension. For example, <code translate="no" dir="ltr">1rem</code> is a dimension. In this context, the unit that is attached to a number is referred to in specifications as a dimension token. Lengths are <strong>dimensions that refer to distance</strong> and they can either be absolute or relative.</p> <h3 id="absolute_lengths" data-text="Absolute lengths" tabindex="-1">Absolute lengths</h3> <p>All absolute lengths resolve against the same base, making them predictable wherever they're used in your CSS. For example, if you use <code translate="no" dir="ltr">cm</code> to size your element and then print, it should be accurate if you compared it to a ruler.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">10</span><span class="devsite-syntax-kt">cm</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">5</span><span class="devsite-syntax-kt">cm</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">background</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">black</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <p>If you printed this page, the <code translate="no" dir="ltr">div</code> would print as a 10x5cm black rectangle. Keep in mind, CSS is used not only for digital content, but also to style print content. Absolute lengths can really come in handy when designing for print.</p> <div class="table-wrapper"> <table> <thead> <tr> <th>Unit</th> <th>Name</th> <th>Equivalent to</th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#cm">cm</a></td> <td>Centimeters</td> <td>1cm = 96px/2.54</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#mm">mm</a></td> <td>Millimeters</td> <td>1mm = 1/10th of 1cm</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#q">Q</a></td> <td>Quarter-millimeters</td> <td>1Q = 1/40th of 1cm</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#in">in</a></td> <td>Inches</td> <td>1in = 2.54cm = 96px</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#pc">pc</a></td> <td>Picas</td> <td>1pc = 1/6th of 1in</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#pt">pt</a></td> <td>Points</td> <td>1pt = 1/72th of 1in</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#px">px</a></td> <td>Pixels</td> <td>1px = 1/96th of 1in</td> </tr> </tbody> </table> </div> <h3 id="relative_lengths" data-text="Relative lengths" tabindex="-1">Relative lengths</h3> <p>A relative length is calculated against a base value, much like a percentage. The difference between these and percentages is that you can contextually size elements. This means that CSS has units such as <code translate="no" dir="ltr">ch</code> that use the text size as a basis, and <code translate="no" dir="ltr">vw</code> which is based on the width of the viewport (your browser window). Relative lengths are particularly useful on the web due to its responsive nature.</p> <h4 id="font-size-relative_units" data-text="Font-size-relative units" tabindex="-1">Font-size-relative units</h4> <p>CSS provides helpful units that are relative to the size of elements of rendered typography, such as the size of the text itself (<code translate="no" dir="ltr">em</code> units) or width of the typefaces characters (<code translate="no" dir="ltr">ch</code> units).</p> <div class="table-wrapper"> <table> <thead> <tr> <th>unit</th> <th>relative to:</th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#em">em</a></td> <td>Relative to the font size, i.e. 1.5em will be 50% larger than the base computed font size of its parent. (Historically, the height of the capital letter "M").</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#ex">ex</a></td> <td>Heuristic to determine whether to use the x-height, a letter "x", or `.5em` in the current computed font size of the element.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#cap">cap</a></td> <td>Height of the capital letters in the current computed font size of the element.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#ch">ch</a></td> <td>Average <a href="https://www.w3.org/TR/css-values-4/#length-advance-measure">character advance</a> of a narrow glyph in the element's font (represented by the "0" glyph).</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#ic">ic</a></td> <td>Average <a href="https://www.w3.org/TR/css-values-4/#length-advance-measure">character advance</a> of a full width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#rem">rem</a></td> <td>Font size of the root element (default is 16px).</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#lh">lh</a></td> <td>Line height of the element.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#rlh">rlh</a></td> <td>Line height of the root element.</td> </tr> </tbody> </table> </div> <figure> <img src="/static/learn/css/sizing/image/the-text-css-is-10x-grea-54e1b11dfc1ef.svg" alt="The text, CSS is 10x great with labels for ascender height, descender height and x-height. The x-height represents 1ex and the 0 represents 1ch" width="800" height="203"> </figure> <h4 id="viewport-relative_units" data-text="Viewport-relative units" tabindex="-1">Viewport-relative units</h4> <p>You can use the dimensions of the viewport (browser window) as a relative basis. These units portion up the available viewport space.</p> <div class="table-wrapper"> <table> <thead> <tr> <th>unit</th> <th>relative to</th> </tr> </thead> <tbody> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#vw">vw</a></td> <td>1% of viewport's width. People use this unit to do cool font tricks, like resizing a header font based on the width of the page so as the user resizes, the font will also resize.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#vh">vh</a></td> <td>1% of viewport's height. You can use this to arrange items in a UI, if you have a footer toolbar for example.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#vi">vi</a></td> <td>1% of viewport's size in the root element's <a href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis">inline axis</a>. Axis refers to writing modes. In horizontal writing modes like English, the inline axis is horizontal. In vertical writing modes like some Japanese typefaces, the inline axis runs top to bottom.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#vb">vb</a></td> <td>1% of viewport's size in the root element's <a href="https://www.w3.org/TR/css-writing-modes-4/#block-axis">block axis</a>. For the block axis, this would be the directionality of the language. LTR languages like English would have a vertical block axis, since English language readers parse the page from top to bottom. A vertical writing mode has a horizontal block axis.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#vmin">vmin</a></td> <td>1% of the viewport's smaller dimension.</td> </tr> <tr> <td><a href="https://www.w3.org/TR/css-values-4/#vmax">vmax</a></td> <td>1% of the viewport's larger dimension.</td> </tr> </tbody> </table> </div> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">10</span><span class="devsite-syntax-kt">vw</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nt">p</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">max-width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">60</span><span class="devsite-syntax-kt">ch</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/JjEYqXa?height=500&theme-id=light&default-tab=result&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen JjEYqXa by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>In this example, the <code translate="no" dir="ltr">div</code> will be 10% of the viewport's width because <code translate="no" dir="ltr">1vw</code> is <strong>1% of the viewport width</strong>. The <code translate="no" dir="ltr">p</code> element has a <code translate="no" dir="ltr">max-width</code> of <code translate="no" dir="ltr">60ch</code> which means it can't exceed the width of 60 "0" characters in the calculated font and size.</p> <aside class="objective"><b>Objective: </b> By sizing text with relative units like <code translate="no" dir="ltr">em</code> or <code translate="no" dir="ltr">rem</code>, rather than an absolute unit, like <code translate="no" dir="ltr">px</code>, the size of your text can respond to user preferences. This can include the system font size or parent element's font size, such as the <code translate="no" dir="ltr"><body></code>. The base size of the <code translate="no" dir="ltr">em</code> is the element's parent and the base size of the <code translate="no" dir="ltr">rem</code> is the base font size of the document. If you don't define a <code translate="no" dir="ltr">font-size</code> on your <code translate="no" dir="ltr">html</code> element, this user-preferred system font size will be honoured if you use relative lengths, such as <code translate="no" dir="ltr">em</code> and <code translate="no" dir="ltr">rem</code>. If you use <code translate="no" dir="ltr">px</code> units for sizing text, this preference will be ignored. <video playsinline autoplay controls muted > <source src="/static/learn/css/sizing/video/VbAJIREinuYvovrBzzvEyZOpw5w1/cUEl77VN4ZtAdElV4fd6.mp4" type="video/mp4" /> </video> </aside> <h2 id="miscellaneous_units" data-text="Miscellaneous units" tabindex="-1">Miscellaneous units</h2> <p>There are some other units which have been specified to deal with particular types of values.</p> <h3 id="angle_units" data-text="Angle units" tabindex="-1">Angle units</h3> <p>In the <a href="/learn/css/color">color module</a>, we looked at <strong>angle units</strong>, which are helpful for defining degree values, such as the hue in <code translate="no" dir="ltr">hsl</code>. They are also useful for rotating elements within transform functions.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">width</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">150</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">150</span><span class="devsite-syntax-kt">px</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">transform</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">rotate</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-mi">60</span><span class="devsite-syntax-kt">deg</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <figure> <div class="wd-embed" style="height: 500px; width: 100%"> <iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/VwPvRbK?height=500&theme-id=light&default-tab=css%2Cresult&editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen VwPvRbK by web-dot-dev on Codepen" ></iframe> </div> </figure> <p>Using the <code translate="no" dir="ltr">deg</code> angle unit, you can rotate a <code translate="no" dir="ltr">div</code> 90° on its center axis.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS"><code translate="no" dir="ltr"><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">background-image</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">url</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'a-low-resolution-image.jpg'</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">@</span><span class="devsite-syntax-k">media</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">-webkit-min-device-pixel-ratio</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">2</span><span class="devsite-syntax-o">),</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">min-resolution</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">192dpi</span><span class="devsite-syntax-o">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">background-image</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">url</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'a-high-resolution-image.jpg'</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <aside class="note"><b>Note: </b> Other angle units include <code translate="no" dir="ltr">rad</code> (radians), <code translate="no" dir="ltr">grad</code> (gradians), and <code translate="no" dir="ltr">turn</code> units, which represent a part of an angle, where <code translate="no" dir="ltr">1turn</code> = <code translate="no" dir="ltr">360deg</code>, and <code translate="no" dir="ltr">0.5turn</code> = <code translate="no" dir="ltr">180deg</code>. </aside> <h4 id="resolution_units" data-text="Resolution units" tabindex="-1">Resolution units</h4> <p>In the previous example the value of <code translate="no" dir="ltr">min-resolution</code> is <code translate="no" dir="ltr">192dpi</code>. The <code translate="no" dir="ltr">dpi</code> unit stands for <strong>dots per inch</strong>. A useful context for this is detecting very high resolution screens, such as Retina displays in a media query and serving up a higher resolution image.</p> <h3 id="check_your_understanding" class="hide-from-toc" data-text="Check your understanding" tabindex="-1">Check your understanding</h3> <p>Test your knowledge of sizing</p> <div class="wd-assessment"><devsite-multiple-choice> <div><p>Which of the following are valid dimensions?</p> </div> <div correct> <div>cm</div> <div>Centimeters, a valid absolute dimension.</div> </div> <div> <div>ui</div> <div>User interface is not a dimension in CSS.</div> </div> <div correct> <div>in</div> <div>Inches, a valid absolute dimension.</div> </div> <div> <div>8th</div> <div>Not a CSS dimension</div> </div> <div correct> <div>px</div> <div>Pixels, a valid absolute dimension.</div> </div> <div correct> <div>ch</div> <div>Character units, a valid relative dimension.</div> </div> <div> <div>ux</div> <div>User experience is not a dimension in CSS.</div> </div> <div correct> <div>em</div> <div>Letter 'M' units, a valid relative dimension.</div> </div> <div correct> <div>ex</div> <div>Letter 'x' units, a valid relative dimension.</div> </div> </devsite-multiple-choice> <devsite-multiple-choice> <div><p>How are absolute and relative units different?</p> </div> <div> <div>Absolute values can't change but relative units can</div> <div>Absolute values can change, but the base they calculate against can't.</div> </div> <div correct> <div>An absolute length is calculated against a single shared base value, where a relative unit is compared against a base value that can change.</div> <div>Relative units are more adaptive and fluid because of their contextual awareness, but there's a power and predictability to absolute units that can be foundational for certain designs.</div> </div> </devsite-multiple-choice> <devsite-multiple-choice> <div><p>Viewport units are absolute.</p> </div> <div> <div>True</div> <div>They may feel absolute, but they're relative to a viewport, which could be an iframe or webview, and isn't always representative of a device screen size.</div> </div> <div correct> <div>False</div> <div>They are relative to the document window they were created in, which may or may not be the same as a device screen.</div> </div> </devsite-multiple-choice> </div> <h2 id="resources" data-text="Resources" tabindex="-1">Resources</h2> <ul> <li><a href="https://www.w3.org/TR/css-values-4">CSS Spec Values and Units Level 4</a></li> <li><a href="https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units">Sizing and Units on MDN</a></li> <li><a href="https://learn.scannerlicker.net/2014/07/31/so-how-much-is-an-em/">All About Ems</a></li> <li><a href="https://wattenberger.com/blog/css-percents">A percentages explainer</a></li> </ul> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2021-04-13 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2021-04-13 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "course", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="u106ohbFLdImnlXfWiQZ9qBbTD4JuC"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_free_trial_server_call","TpcFeatures__enable_unmirrored_page_left_nav","Search__enable_page_map","Cloud__enable_cloud_facet_chat","DevPro__enable_enterprise","Profiles__enable_page_saving","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator_index_yaml","MiscFeatureFlags__enable_variable_operator","CloudShell__cloud_code_overflow_menu","Profiles__require_profile_eligibility_for_signin","DevPro__enable_vertex_credit_card","MiscFeatureFlags__enable_view_transitions","DevPro__enable_developer_subscriptions","Profiles__enable_recognition_badges","Profiles__enable_release_notes_notifications","Cloud__enable_llm_concierge_chat","Profiles__enable_public_developer_profiles","Search__enable_ai_eligibility_checks","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_project_variables","DevPro__enable_code_assist","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_completequiz_endpoint","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__emergency_css","MiscFeatureFlags__gdp_dashboard_reskin_enabled","Search__enable_dynamic_content_confidential_banner","Search__enable_suggestions_from_borg","Concierge__enable_pushui","DevPro__enable_google_one_card","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloud_shell","Profiles__enable_purchase_prompts","Profiles__enable_stripe_subscription_management","Profiles__enable_complete_playlist_endpoint","Profiles__enable_profile_collections","MiscFeatureFlags__developers_footer_image","CloudShell__cloud_shell_button","Profiles__enable_awarding_url","Analytics__enable_clearcut_logging","Experiments__reqs_query_experiments","MiscFeatureFlags__enable_framebox_badge_methods","Cloud__enable_cloudx_ping","DevPro__enable_cloud_innovators_plus","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_completecodelab_endpoint","Concierge__enable_actions_menu","OnSwitch__enable","DevPro__enable_firebase_workspaces_card","DevPro__enable_devpro_offers","Profiles__enable_developer_profiles_callout","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_join_program_group_endpoint","Cloud__enable_cloudx_experiment_ids"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4],null,null,1,null,"https://developerscontentinsights-pa.googleapis.com","AIzaSyC11xEGtFhkmSh_iF6l_itbxnFz2GrIBOg","AIzaSyAXJ10nRF73mmdSDINgkCNX5bbd2KPcWm8"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Sizing Units | web.dev