El alto y el ancho en CSS se usan para establecer el alto y el ancho de las cajas. Su valor se puede configurar usando longitud, porcentaje o automático.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>width and height</title>
<style>
.GFG{
height: 120px;
width: 50%;
border: 5px solid black;
padding-left: 50px;
padding-top: 50px;
font-size:42px;
font-weight:bold;
color:green;
margin-left:50px;
margin-top:50px;
}
</style>
</head>
<body>
<div class = "GFG"> GeeksforGeeks </div>
</body>
</html>
Producción:
Alto y ancho de la imagen: se utiliza para establecer el alto y el ancho de una imagen. Su valor puede ser en px, cm, porcentaje,… etc.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Height and width of image</title>
<style>
.GFG {
width:300px;
height:200px;
border:3px solid black;
}
</style>
</head>
<body>
<h3>Set the width and height of an Image</h3>
<img class="GFG" src="4.jpg">
</body>
</html>
Producción:
Establezca el ancho máximo y el ancho mínimo de un elemento:
- max-width: Se utiliza para establecer el ancho máximo de la caja. Su efecto se puede ver cambiando el tamaño de los navegadores.
html
<!DOCTYPE html>
<html>
<head>
<title>max-width of element</title>
<style>
.GFG {
max-width:500px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="GFG">
<h3>GeeksforGeeks</h3>
<p>GeeksforGeeks is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written,
well thought and well explained computer science
and programming articles, quizzes etc.
</p>
</body>
</html>
- Producción:
- min-width: Se utiliza para establecer el ancho mínimo de la caja. Su efecto se puede ver cambiando el tamaño de los navegadores.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>min-width of element</title>
<style>
.GFG {
min-width:400px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="GFG">
<h3>GeeksforGeeks</h3>
<p>GeeksforGeeks is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written,
well thought and well explained computer science
and programming articles, quizzes etc.
</p>
</body>
</html>
- Producción:
Establezca la altura máxima y la altura mínima de un elemento:
- max-height: Se utiliza para establecer la altura máxima de la caja. Su efecto se puede ver cambiando el tamaño de los navegadores.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>max-height of element</title>
<style>
.GFG {
max-height:100px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="GFG">
<h3>GeeksforGeeks</h3>
<p>GeeksforGeeks is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written,
well thought and well explained computer science
and programming articles, quizzes etc.
</p>
</body>
</html>
- Producción:
- min-height: Se utiliza para establecer la altura mínima de la caja. Su efecto se puede ver cambiando el tamaño de los navegadores.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>min-height of element</title>
<style>
.GFG {
min-height:50px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="GFG">
<h3>GeeksforGeeks</h3>
<p>GeeksforGeeks is a computer science platform
where you can learn programming. It is a Computer
Science portal for geeks. It contains well written,
well thought and well explained computer science
and programming articles, quizzes etc.
</p>
</body>
</html>
- Producción:
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA