Ancho del 100% y ancho predeterminado

La propiedad CSS width no define el ancho total de un bloque, sino el ancho de su contenido. El ancho total se calcula sumando tres componentes: el ancho del contenido, el relleno y el grosor de los bordes izquierdo y derecho.

El comportamiento de un elemento puede depender de cómo definas su ancho:

Primera opción. Si no defines el ancho, se usa el valor predeterminado width: auto;. En este caso, el bloque ocupa todo el ancho del bloque padre. Si tiene relleno o bordes, el ancho de su contenido se reduce automáticamente y el ancho total sigue siendo igual al del padre.

Segunda opción. Si defines el ancho de forma explícita, por ejemplo, con width: 100%;, el ancho del contenido del bloque será igual al ancho del bloque padre. Si le añades relleno y bordes, el ancho total superará el del padre.

En este ejercicio verás cómo funcionan estos efectos en la práctica. Los anchos de los bloques se calcularán automáticamente.

Además de usar CSS, puedes definir el ancho de los campos de entrada con el atributo size. En estos campos, width: auto calcula el ancho a partir del valor predeterminado de size y no los estira hasta ocupar todo el ancho del contenedor.