Cuando trabajamos con HTML y hojas de estilo CSS hay veces que el comportamiento de los elementos de la página que estemos diseñando dista mucho de lo que podríamos pensar que sería lo correcto. En estos casos, tenemos que zambullirnos en Internet a indagar e indagar sobre ellos hasta dar con la posible solución que pueda resolver nuestro problema.

En este caso, vamos a hablar sobre el comportamiento que tienen los elementos HTML cuando les asignamos un padding. Supón que tienes un elemento div con una anchura y altura predeterminadas, ya sea en píxeles o en porcentaje, al que le hemos asignado un borde para visualizar mejor sus dimensiones:

Como puedes observar en la pestaña de CSS, este contenedor posee una anchura de un 75% y una altura de 100 píxeles.

Ahora, vamos a asignarle un padding de 20 píxeles a cada lado:

Podemos ver que, ahora, el contenedor presenta un padding que hace que el texto se separe de los bordes, pero además, el tamaño del contenedor ha aumentado, es decir, ahora tiene una altura y anchura de 40 píxeles más debido al padding asignado a cada uno de sus lados.

Para evitar esto, vamos a usar la propiedad box-sizing del contenedor, haciendo así que el tamaño del mismo incluya también su padding. Para ello, simplemente asignamos el valor box-sizing: border-box en el CSS, y obtendremos el siguiente resultado:

De esta forma, el contenedor mantendrá el padding asignado, de 20 píxeles, sin aumentar sus dimensiones definidas con anterioridad.

Esto que acabamos de ver, ocurre igualmente con los elementos input de los formularios, lo que hace que, para cuadrarlos al diseño deseado, debamos tener un poco de destreza.

Vamos a añadir un elemento input de tipo texto al código que ya tenemos, y vamos a configurar dicho input con una anchura del 100% del contenedor padre, y un padding de 5 píxeles para los lados superior e inferior, y de 10 píxeles para derecha e izquierda.

¿Qué ocurre? Que nuestro nuevo elemento input se sale de las dimensiones del contenedor padre, incluso habiéndole fijado una anchura de un 100%. ¿Cómo lo corregimos? Pues análogamente a como hicimos con su contenedor, vamos a asignarle la propiedad box-sizing con el valor border-box:

¡Voilà! Aquí vemos como usando la propiedad box-sizing y asignándole el valor border-box, podemos hacer que los elementos HTML de nuestra página web se ajusten a la perfección, en tamaño, a los valores que les hayamos asignado, evitando que estos crezcan cuando asignemos algún tipo de padding a los mismos.