La propiedad min-width en CSS se usa para definir el ancho mínimo de un elemento. El valor del ancho no puede ser menor que el valor de min-width. Si el contenido especificado dentro del elemento es más pequeño, min-width mantiene el ancho mínimo especificado.
Sintaxis:
min-width: length|initial|inherit;
Valores de propiedad:
- length: esta propiedad se utiliza para establecer la longitud de min-width. La longitud se puede establecer en forma de px, cm, etc.
Sintaxis:
min-width: length;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
p {
min-width: 300px;
display: inline-block;
color:white;
background-color:green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Producción:
- porcentaje (%): Se utiliza para establecer el ancho mínimo en porcentaje.
Sintaxis:
min-width: %;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
p {
min-width: 35%;
display: inline-block;
color:white;
background-color:green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Producción:
- initial: se utiliza para establecer la propiedad min-width en su valor predeterminado.
Sintaxis:
min-width: initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
p {
min-width: initial;
display: inline-block;
color:white;
background-color:green;
}
</style>
</head>
<body>
<p>
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Producción:
- heredar: esta propiedad se hereda de su padre.
Sintaxis:
min-width: inherit;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<!-- min-width CSS property -->
<style>
.gfg {
min-width: initial;
display: inline-block;
color:white;
background-color:green;
}
P {
min-width: inherit;
}
.geeks {
min-width: initial;
display: inline-block;
color:white;
background-color:blue;
}
</style>
</head>
<body>
<div class = "gfg">
<p>
GeeksforGeeks: A computer science portal
</p>
<div class = "geeks">
GeeksforGeeks: A computer science portal
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad min-width se enumeran a continuación:
- Google Chrome 1.0 y superior
- Borde 12.0 y superior
- Internet Explorer 7.0 y superior
- Firefox 1.0 y superior
- Safari 1.0 y superior
- Ópera 4.0 y superior
Publicación traducida automáticamente
Artículo escrito por EnaMotwani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA