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 las páginas web. Más importante aún, le permite hacer esto independientemente del HTML que conforma cada página web.
En este artículo, aprenderemos cómo hacer que funcionen las propiedades de contenido mínimo y contenido máximo de CSS.
Propiedades min-content y max-content:
min-content y max-content son el valor de la propiedad de ancho. Cuando definimos cualquier elemento con esta propiedad, afectará a ese elemento en particular.
- contenido máximo: este valor se utiliza para determinar un tamaño suponiendo que hay espacio disponible infinito.
- min-content: este valor se utiliza para determinar un tamaño asumiendo que hay espacio disponible infinito.
Acercarse:
- Cree un archivo HTML con algunas propiedades CSS.
- Después de eso, agregaremos un elemento HTML div y dentro de este elemento, incluiremos imágenes y algo de texto.
Ejemplo 1: en el siguiente código, veremos el uso de contenido mínimo y cómo funciona.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>GeeksforGeeks</title>
<style>
.card{
width:min-content;
border:1px solid black;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;font-size:30px;">
GeeksforGeeks
</h1>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
alt="GFG image" />
<h1>GeeksforGeeks is a computer science portal for geeks</h1>
</div>
</center>
</body>
</html>
Producción:
contenido mínimo
Ejemplo 2: en el siguiente código, veremos el uso de la propiedad max-content de CSS y cómo funciona.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>GeeksforGeeks</title>
<style>
.card{
width:max-content;
border:1px solid black;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;font-size:30px;">
GeeksforGeeks
</h1>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
alt="GFG image" />
<h1>GeeksforGeeks is a computer science portal for geeks</h1>
</div>
</center>
</body>
</html>
Producción:
contenido máximo