La diferencia entre width:auto y width:100%
La mayor parte de las veces que veo un CSS en el que “algo sale mal” (incluso en mis propios CSS) se debe a una falta de entendimiento de las propiedades y reglas de CSS. Es normal: la mayoría de las personas que hacen páginas web (incluido yo mismo) han aprendido de una forma desordenada, viendo ejemplos, probando, es decir, de una forma empírica, pero no han realizado un curso, no se han leído un libro, y mucho menos se han leído la especificación oficial de CSS. Han ido descubriendo las reglas de CSS, pero realmente no las han aprendido.
En el artículo The difference between width:auto and width:100% se explica la diferencia entre auto y 100%. Se emplea width:100% para que un elemento adopte todo el ancho del elemento contenedor que lo contiene, pero esto es un error, ya que en el cálculo de width no se tiene en cuenta el margen (margin), el borde (border) y el relleno (padding). Si alguna de estas propiedades tiene un valor distinto de cero, el tamaño final del elemento será superior al de su contenedor y como resultado “se saldrá”. ¿No te ha pasado alguna vez? La solución es usar width:auto. Sencillo y efectivo.
El autor de este artículo ha preparado un ejemplo que muestra muy bien esta situación:
Las diferencias son claras, así que, seguramente la próxima vez que estés pensando escribir width:100%, seguramente lo que realmente necesites es width:auto.
Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.
pero para usar paddig o margin, con width 100% solo tiene que usar border-box
Sí, ahora sí que se puede usar box-sizing con border-box, pero hace 2 años cuando escribí esta entrada era prematuro por compatibilidad con los navegadores existentes (hoy también dará problemas con navegadores muy antiguos, pero ya son muy pocos).