La longitud es la medida de la distancia seguida de una unidad de longitud. No hay espacio entre el número y la unidad. Puede ser positivo o negativo. La unidad de longitud es opcional después de 0. Hay dos tipos de unidades de longitud que son absolutas y relativas. Las longitudes se utilizan en muchas propiedades de CSS, como relleno, ancho de borde, tamaño de fuente, sombra de texto, ancho, alto y márgenes.
Sintaxis:
<length>
Toma como parámetro un número seguido de una unidad de longitud.
Nota: No se debe dejar espacio entre el número y su unidad.
Ejemplo 1: El siguiente ejemplo demuestra el uso de longitud como valor usando 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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG">
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la longitud como un valor para los márgenes de un elemento div.
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>
Producción:
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 3 y superior
- Firefox 1 y superior
- Ópera 3.5 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por vipinyadav15799 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA