Skip to content
Related Articles

Related Articles

Improve Article

CSS | Length Data Type

  • Last Updated : 02 Jul, 2021
Geek Week

Length is the measurement of distance followed by a length unit. There is no space between the number and unit. It can be positive or negative. The length unit is optional after 0. There are two types of length units which are absolute and relative. Lengths are used in many CSS properties, such as padding, border-width, font-size, text-shadow, width, height, and margins. 
 

Syntax: 
 

<length>

 

It takes number followed by a unit of length as a parameter.

Note: No space should be given between the number and its unit.
 



Example 1: The following example demonstrates the use of length as value using CSS.

 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            height: 200px;
            width: 150px;
        }
    </style>
 
    <title>
        CSS | Length Data Type
    </title>
</head>
 
<body>
    <h2>
        Set the height and
        width of an element
    </h2>
 
    <div>
        <img src=
        alt="GFG">
    </div>
</body>
 
</html>

Output: 
 

 

Example 2: The following example demonstrates the length as a value for margins of a div element.

 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            border: 1px solid black;
            margin-top: 50px;
            margin-bottom: 50px;
            margin-right: 50px;
            margin-left: 80px;
            background-color: lightblue;
        }
    </style>
</head>
 
<body>
 
    <h2>CSS Value | Length</h2>
 
    <div>
        This div element has a top
        margin of 50px, a right
        margin of 50px, a bottom
        margin of 50px, and a left
        margin of 80px.
    </div>
</body>
 
</html>

Output: 
 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :