Open In App

CSS | Length Data Type

Improve
Improve
Like Article
Like
Save
Share
Report

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 1 and above
  • Edge 12 and above
  • Internet Explorer 3 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Safari 1 and above


Last Updated : 13 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads