| Definición | Establece la anchura de los elementos de bloque |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra | |
| Valor inicial | auto |
| Se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla. |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/visudet.html#propdef-width |
Ejemplos de uso
Para los elementos de bloque y las imágenes, la propiedad width permite establecer su anchura directamente mediante una medida. El siguiente ejemplo establece la anchura a un <div>, de modo que no ocupe todo el sitio disponible:
Aunque ahora el <div> no ocupa toda la anchura disponible, sigue siendo un elemento de bloque, lo que significa que si se coloca seguido otro <div> idéntico, se mostrarán uno debajo de otro:
La siguiente imagen tiene un estilo CSS de width: 50px, equivalente a establecer el atributo width de HTML:
La propiedad width no funciona con los elementos en línea que no son imágenes. En el siguiente ejemplo, a pesar de que a cada enlace se le asigna una anchura diferente, el navegador los muestra con la misma anchura:
(width: 150px) Lorem ipsum dolor sit amet
(width: 250px) Lorem ipsum dolor sit amet
Si se utilizan unidades de medida, los valores indicados no pueden ser negativos. Si en vez de una unidad de medida se indica un porcentaje, la referencia de ese valor es la anchura del elemento que lo contiene.
En el siguiente ejemplo, los dos elementos <div> interiores tienen la misma anchura del 50%, pero como la anchura de su elemento contenedor es diferente, la anchura real de cada <div> interno también es diferente:
Si se establece la anchura de un elemento con la unidad de medida em, el valor indicado toma como referencia el tamaño de letra del propio elemento. En el siguiente ejemplo, los dos <div> tienen el mismo valor en la propiedad width, pero como su tamaño de letra es muy diferente, su anchura en pantalla también es muy diferente:
El valor auto es el valor por defecto de la anchura de todos los elementos. En este caso, el navegador determina la anchura de cada elemento teniendo en cuenta, entre otros, el tipo de elemento que se trata (de bloque o en línea), el sitio disponible en la pantalla del navegador y los contenidos de los elementos.
Por último, recuerda que el valor de la propiedad width siempre hace referencia a la anchura del contenido de cada elemento. Si se añaden márgenes, bordes y rellenos, la anchura total con la que se muestra el elemento será mayor que el valor de la propiedad width: