El padding es una de las propiedades fundamentales de CSS. Permite controlar el espacio entre el contenido de un elemento y su borde, mejorando la legibilidad y el diseño visual de la página. Aunque parece una propiedad básica, su comportamiento puede cambiar según cómo gestionemos otras propiedades, como por ejemplo box-sizing.

En este artículo, vamos a desglosar cómo funciona el padding. Veremos sus variantes, aprenderemos cómo se relaciona con el box-sizing, y analizaremos recomendaciones para su uso.

¿Qué es el padding en CSS?

El padding es el espacio interno de un elemento HTML, que separa su contenido del borde. Se puede aplicar a todos los lados del elemento (arriba, abajo, izquierda y derecha) o individualmente a cada lado.

A continuación veremos un código CSS que muestra su aplicación básica sobre un div, que además tiene asignado un color de fondo:

div {
  padding: 20px;
  background-color: #f0f0f0;
}

En el ejemplo anterior, aplicamos un padding de 20 píxeles a todos los lados de un div. El contenido del div estará separado de sus bordes por 20 píxeles en cada dirección.

También es posible especificar diferentes valores de padding para cada lado del elemento. A continuación veremos un ejemplo:

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

Aquí estamos aplicando un padding personalizado para cada lado: 10px en la parte superior, 20px a la derecha, 15px en la parte inferior, y 5px a la izquierda. Esto permite un control más granular sobre el espaciado interno.

Vale decir que el padding también puede aplicarse a cajas de texto o títulos, entre otros elementos.

Sintaxis abreviada del padding de CSS

Para simplificar la escritura, CSS permite utilizar una sintaxis abreviada o shorthand. Dependiendo de cuántos valores se utilicen, el padding se aplicará de manera distinta. A continuación veremos las posibilidades que tenemos:

• 1 valor: padding: 20px; → aplica 20px a los cuatro lados.
• 2 valores: padding: 10px 20px; → aplica 10px a los lados superior e inferior, y 20px a los lados derecho e izquierdo.
• 3 valores: padding: 10px 20px 15px; → aplica 10px al lado superior, 20px a los lados derecho e izquierdo, y 15px al lado inferior.
• 4 valores: padding: 10px 20px 15px 5px; → aplica 10px al lado superior, 20px al lado derecho, 15px al lado inferior, y 5px al lado izquierdo.

Padding en unidades relativas y absolutas

El padding no solo se puede definir en píxeles (px), también se puede usar con otras unidades como porcentajes (%), ems (em), rems (rem), y más. El uso de unidades relativas permite crear diseños más flexibles y adaptables.

A continuación veremos un códigos CSS donde el padding se aplica en porcentajes:

div {
  padding: 5%;
}

Aquí, el padding será del 5% del ancho o altura del elemento contenedor, según sea el caso. Es útil en diseños fluidos o responsive.

Propiedades para el padding

CSS permite controlar cómo heredan los elementos sus propiedades mediante palabras clave como inherit, initial, y unset.

• inherit: hereda el valor del padding del elemento padre.
• initial: establece el valor predeterminado del padding (que es 0).
• unset: elimina cualquier valor de padding asignado y lo convierte en inherit o initial dependiendo del contexto.

Ejemplo de código usando inherit:

div {
  padding: inherit;
}

El padding y box-sizing

El comportamiento del padding puede variar drásticamente dependiendo de cómo se gestione la propiedad box-sizing. Esta propiedad define cómo se calculan las dimensiones totales de un elemento.

• content-box (valor por defecto): El padding no forma parte del ancho o altura del elemento.
• border-box: El padding se incluye en las dimensiones totales del elemento.

Ejemplo con content-box:

div {
  width: 200px;
  padding: 20px;
  box-sizing: content-box;
}

En este caso, el contenido del div ocupará 200px de ancho, pero el elemento en su totalidad será más ancho debido a los 40px adicionales (20px de padding a cada lado).

Ejemplo con border-box:

div {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
}

Con border-box, el padding se incluye dentro del ancho especificado. El div ocupará exactamente 200px de ancho, incluyendo el padding.

Recomendaciones para usar padding

A continuación veremos cinco recomendaciones para trabajar con el padding:

1. Usa border-box para layouts más predecibles: box-sizing: border-box es una opción preferida en diseño moderno porque evita sorpresas al ajustar el tamaño de los elementos. La mayoría de frameworks como Bootstrap ya usan esta técnica.
2. Unidades relativas para diseño responsive: en sitios que emplean las técnicas de Responsive Web Design, suelo recomendar usar porcentajes o unidades relativas como em o rem, ya que ajustan el padding según el tamaño de la pantalla y nos permiten manejar la adaptabilidad del diseño.
3. No abusar del padding: un padding excesivo puede generar un desbalance visual. Siempre recomiendo mantener la consistencia de nuestro maquetad. En este sentido puede ser importante considerar evitar aplicar padding desigual, ya que pueda generar un diseño desalineado.
4. Combina padding y márgenes: el padding controla el espacio dentro de un elemento, mientras que los márgenes controlan el espacio entre los elementos. Juntos, permiten un control total sobre el espaciado en la página.
5. Realizar pruebas con herramientas de desarrollo: a mis alumnos siempre les recomiendo usar las herramientas de desarrollo del navegador para ajustar y experimentar con diferentes valores. Entre las características que nos ofrecen está la de probar el padding en tiempo real. Esto facilita encontrar el espaciado ideal para cada elemento.

En conclusión

El padding de CSS es una característica que debemos dominar a la hora de maquetar. Cuando se entiende bien permite mejorar la estructura y apariencia de una página. Ya sea que estemos creando un diseño adaptable o buscando perfeccionar el espaciado interno de un elemento, el conocimiento de cómo funciona el padding, en combinación con propiedades como box-sizing, puede hacer una gran diferencia en la calidad del trabajo terminado.

Para sabe más sobre el modelo de caja, podemos consultar el documento del W3C titulado CSS Box Model Module Level 3.