CSS Data Type - <length>

The CSS <length> data type is a represents a distance or measurement. It is a generic term for a value that can be expressed in various units such as pixels (px), ems (em), rems (rem), percentage (%), inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc), among others.

This data type can be applied to a range of CSS properties, including font-size, text-shadow, border-width, height, margin, padding, and width.

Syntax

<number><unit>

  • <number> and a set of units come first in the <length> data type; there is no space between the units.

  • If number is 0 no unit is needed to be specified.

  • These units, which express measures w.r.t to other lengths like character size, line height, or viewport size, can be either absolute or relative. Scaling style sheets across various output contexts is made easier by the use of relative length units.

CSS <length> - Relative Length Units

The relative length units listed here are based on font and viewport.

Relative Length Units Based On Font

By comparing the size of a certain character or font attribute inside the currently applied font of an element or its parent, font lengths determine the <length> value.

<length> = cap
<length> = ch
<length> = em
<length> = ex
<length> = ic
<length> = lh
<length> = rem 
<length> = rlh

Relative Length Units Based On Viewport

Four viewport sizes are associated with the viewport-percentage length units: small, big, dynamic, and default. They adapt to shifting browser interfaces, modifying the visibility of content when interfaces resize or shrink. 

/* Small viewport */
<length> = sv*

/* Large viewport */
<length> = lv*

/* Dynamic viewport */
<length> = dv*

/* Viewport- percentage length values scaled according to height and width of containing block */
<length> = svh | lvh | dvh
<length> = svw | lvw | dvw
<length> = vmax
<length> = vmin
<length> = svb | lvb | dvb
<length> = svi | lvb | dvb

Container Query Length Units

When using container queries to style a container, the lengths allowed are proportional to the dimensions of the query container.

<length> = cqw
<length> = cqh
<length> = cqi 
<length> = cqb
<length> = cqmin
<length> = cqmax

Absolute Length Units

A physical measurement when the physical properties of the output medium are known, such as for print layout are represented by absolute length unit.

<length> = px
<length> = cm 
<length> = mm 
<length> = Q 
<length> = in 
<length> = pc
<length> = pt

CSS <length> - Comparing Lengths

In the following example, users may input various length values and the selected length will be dynamically displayed on the result bar.

Enter a valid length value (e.g., '300px', '50%', '30vw') in the input box to dynamically check the length in the result bar.

<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 50px;
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 50vh;
      background-color: #ecf0f1; 
   }
   #inputContainer {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
   }
   #inputField {
      padding: 12px; 
      font-size: 16px;
      margin-right: 10px;
      border: 1px solid #3498db;
      border-radius: 4px;
      outline: none;
   }
   #inputField::placeholder {
      color: #95a5a6;
   }
   #submitBtn {
      padding: 12px 16px; 
      font-size: 16px;
      background-color: #3498db; 
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
   }
   #submitBtn:hover {
      background-color: #2980b9; 
   }
   #resultBar {
      width: 0;
      height: 20px;
      background-color: #2ecc71; 
      transition: width 0.3s ease;
      margin-top: 10px;
   }
</style>
</head>
<body>
<div id="inputContainer">
   <input type="text" id="inputField" placeholder="Enter length (e.g., 300px, 50%, 30vw)">
   <button id="submitBtn" onclick="updateResult()">Enter</button>
</div>
<div id="resultBar"></div>
<script>
   function updateResult() {
   const inputField = document.getElementById('inputField');
   const resultBar = document.getElementById('resultBar');
   const inputValue = inputField.value.trim();
   resultBar.style.width = inputValue;
   }
   // Trigger the updateResult function on pressing Enter key
   document.getElementById('inputField').addEventListener('keyup', function(event) {
   if (event.key === 'Enter') {
   updateResult();
   }
   });
</script>
</body>
</html>

CSS <length> - Demo Of Different Length Units

The following example displays some of the length units in one screen.

<html>
<head>
<style>
   body {
      font-family: 'Open Sans', sans-serif;
      margin: 20px;
      background-color: #f8f8f8;
   }
   h1, h2 {
      color: #333;
      text-align: center;
      margin-bottom: 20px;
   }
   h3 {
      color: #3498db;
      text-align: center;
   }
   .length-examples {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
   }
   .box {
      width: 100px;
      height: 100px;
      border: 2px solid #3498db;
      margin: 20px;
      box-sizing: border-box;
      background-color: #ecf0f1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: #333;
      transition: transform 0.3s ease-in-out;
   }
   .box:hover {
      transform: scale(1.1);
   }
   .px-example {
      width: 100px;
      height: 100px;
   }
   .em-example {
      font-size: 1.5em;
   }
   .rem-example {
      font-size: 1.5rem;
   }
   .percent-example {
      width: 50%;
      height: 50px;
      background-color: #3498db;
   }
</style>
</head>
<body>
<h1>Exploring Different Length Units in CSS</h1>
<div class="length-examples">
<div class="length-example">
   <h3>Pixel (px)</h3>
   <div class="box px-example">100px</div>
   <div class="box px-example">100px</div>
</div>
<div class="length-example">
   <h3>Em (em)</h3>
   <div class="box em-example">1.5em</div>
   <div class="box em-example">1.5em</div>
</div>
<div class="length-example">
   <h3>Rem (rem)</h3>
   <div class="box rem-example">1.5rem</div>
   <div class="box rem-example">1.5rem</div>
</div>
<div class="length-example">
   <h3>Percentage (%)</h3>
   <div class="box percent-example">50%</div>
   <div class="box percent-example">50%</div>
</div>
</div>
</body>
</html>
Advertisements