En este artículo, aprenderemos sobre la propiedad que se encarga de establecer la altura de una caja. El CSS (Hojas de estilo en cascada) es un lenguaje de hojas de estilo utilizado para diseñar una página web para que sea atractiva. La razón para usar esto es simplificar el proceso de hacer que las páginas web estén presentables. Te permite aplicar estilos en páginas web
¿Qué propiedad se utiliza para establecer la altura de una caja?
Para establecer la altura de un cuadro, se utilizan las propiedades de altura y ancho y su valor se puede establecer usando longitud, porcentaje o automático.
Propiedades:
- propiedad de altura: esta propiedad se utiliza para crear la altura de la caja.
- propiedad de ancho: esta propiedad se utiliza para crear un ancho de la caja.
Ejemplo 1: en el siguiente código, haremos uso de la propiedad de alto y ancho que se usa para definir el alto y el ancho de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>width and height</title>
<style>
.gfg {
height: 120px;
width: 50%;
border: 2px solid black;
padding-left: 50px;
padding-top: 50px;
font-size: 42px;
color: green;
margin-left: 150px;
margin-top: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks </div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de la propiedad de alto y ancho que se usa para definir el alto y el ancho de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>width and height</title>
<style>
.gfg {
height: 120px;
width: 60%;
border: 10px dotted black;
padding-left: 50px;
padding-top: 50px;
font-size: 42px;
color: green;
margin-left: 110px;
margin-top: 50px;
background-color: lightgreen;
text-align: center;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="gfg"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA