¿Qué es la propiedad width de CSS?
La propiedad width de CSS establece el tamaño horizontal preferido de un elemento, normalmente para su caja de contenido. El modelo de dimensionamiento de cajas, las dimensiones intrínsecas, el modo de diseño y las restricciones min-width o max-width pueden alterar el tamaño utilizado.
Cómo funciona la propiedad width de CSS
La propiedad width aporta un tamaño preferido al algoritmo de diseño en lugar de garantizar la medida final de la caja de borde. Su porcentaje o longitud se aplica a la caja de contenido con el dimensionamiento content-box y a la caja de borde con border-box; las palabras clave intrínsecas y el dimensionamiento automático siguen reglas específicas de cada modo de diseño. Las restricciones mínimas y máximas pueden prevalecer sobre el valor elegido, y la negociación de flex o grid puede redistribuir el espacio. La propiedad se usa para dimensionar superficies multimedia y controles, pero los elementos reemplazados también aportan dimensiones y relaciones de aspecto intrínsecas.
Datos clave
- Con box-sizing: content-box, el ancho declarado excluye el padding y los bordes; con border-box, esos componentes se incluyen dentro del ancho declarado.
- Con el valor inicial min-width: auto, un elemento flex dentro de un contenedor cuyo eje principal es horizontal y algunos elementos grid, como uno que ocupa una sola pista 1fr en sentido horizontal, pueden negarse a reducir su ancho por debajo del mínimo basado en su contenido, a menos que su valor calculado de overflow sea hidden, scroll o auto. Establecer min-width: 0 elimina ese límite inferior automático.
- Para una imagen o un video con proporciones intrínsecas, especificar una dimensión puede permitir que la otra siga siendo automática; forzar ambas dimensiones puede distorsionar el contenido renderizado.
Cuándo es relevante la propiedad width de CSS
Establece width para imágenes adaptables, reproductores de video, paneles y controles teniendo en cuenta el diseño que los contiene. Un ancho porcentual puede provocar desbordamiento cuando se añaden padding y bordes con el dimensionamiento content-box.