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