Propiedad padding

DefiniciónEstablece la anchura de algunas o todas las zonas de relleno de los elementos
Valores
permitidos
Uno, dos, tres o cuatro de los siguientes valores:
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicialCada zona de relleno define su propio valor por defecto
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-padding

Ejemplos de uso

La propiedad padding es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

Si se quiere establecer el mismo valor para todas las zonas de relleno de un elemento, se podría utilizar la siguiente regla CSS:

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

Utilizando la propiedad padding, es posible establecer de forma abreviada el mismo valor a todas las zonas de relleno de un elemento:

div {
  padding: 10px;
}

La propiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea.

Si se indican dos valores, el primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenos horizontales, de modo que las siguientes reglas CSS son equivalentes:

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

Si se indican tres valores, el primero hace referencia al relleno superior, el segundo es el valor de los rellenos horizontales y el tercero es el relleno inferior, de modo que las siguientes reglas CSS son equivalentes:

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

Por último, si se indican cuatro valores, el primero es el relleno superior, el segundo es el relleno derecho, el tercero es el relleno inferior y el cuarto es el relleno izquierdo, de modo que las siguientes reglas CSS son equivalentes:

div {
  padding: 10px 20px 30px 40px;
}
 
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

El uso de propiedades como padding no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS.