
La propiedad min-width en CSS establece el ancho mínimo del elemento y evita que el valor usado de la propiedad width
sea menor que el valor especificado en la propiedad min-width
.
Funciones min-width css
Valor inicial | 0 |
---|---|
Aplicado a | Todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas. |
Heredable | No |
Móvil | Sí |
Valor calculado | Porcentaje, longitud absoluta o palabra reservada auto . |
/* <length> longitudes */ min-width: 3.5em ; /* <porcentaje> porcentajes */ min-width: 75%; /* palabras reservadas */ min-width: none ; /* valores globales */ min-width: inherit; min-width: initial; min-width: unset;
El ancho del elemento se establecerá en el valor de la propiedad min-width
sí es min-width
mayor que max-width
o width
.
Ejemplos y aplicaciones en código
Usaremos el siguiente ejemplo, un elemento <div>
actualmente igual al 40%
elemento de visualización que lo contiene, pero no menor que un valor de propiedad de ancho min-width
, a saber 350px
:
< div > Contenido de texto </ div >
Código CSS:
div { width: 40%; min-width: 350px; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 7.0 | 7.0 | 1.0 |
Características generales
auto
El valor predeterminado es sin ancho mínimo.
<length>
No se puede determinar el ancho mínimo en longitudes absolutas y los valores negativos.
<percentage>
Especifica el ancho mínimo como un porcentaje del ancho del elemento de bloque que contiene el elemento actual, y no se pueden usar valores negativos.
Estructura min-width css
min-width: <length> | <percentage> | auto;
Consulte también
- La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento. - Página de propiedades
max-height
que establece el ancho mínimo del elemento. - Página de propiedades
min-height
que establece la altura mínima del elemento. - La página de propiedades
max-width
que establece el ancho máximo del elemento.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS