Rellenos CSS

Padding CSS

La propiedad padding del CSS define el espacio en blanco entre el contenido del elemento y el borde del elemento. El padding (relleno) despeja un área alrededor del contenido (dentro del borde) de un elemento.

Nota: El padding es afectado por el color del background del elemento.

Con el CSS, se tiene el control del relleno (padding). También hay propiedades para especificar el relleno para cada lado de un elemento (top, right, bottom y left).

Padding - Lados Individuales

El CSS tiene propiedades para especificar el relleno para cada lado de un elemento:

• padding-top
• padding-right
• padding-bottom
• padding-left

Todas estas propiedades pueden tener los siguientes valores:

• longitud - especifica el relleno en px, pt, cm, etc.
• % - especifica el relleno en porcentaje del ancho del contenido del elemento.
• inherit - especifica que el relleno debe ser heredado del elemento padre.

El siguiente ejemplo establece diferentes rellenos para los cuatro lados del elemento <p>:

p {
  padding-top: 50px;
  padding-right: 60px;
  padding-bottom: 40px:
  padding-left: 70px;
}

Padding - Propiedad Simplificada

El código acortado, es posible especificar las cuatro propiedades anteriores en una sola. La propiedad padding es una propiedad simplificada para las siguientes propiedades individuales para rellenos:

• padding-top
• padding-right
• padding-bottom
• padding-left

Ejemplo:

p {
  padding: 50px 60px 40px 70px;
}

Aquí como funciona:

Si la propiedad padding tiene cuatro valores:

• padding: 50px 60px 40px 70px;
  • el relleno superior es de 50px.
  • el relleno derecho es de 60px.
  • el relleno inferior es de 40px.
  • el relleno izquierdo es de 70px.

Si a propiedad padding tiene tres valores:

• padding: 50px 60px 40px;
  • el relleno superior es de 50px.
  • el relleno derecho e izquierdo es de 60px.
  • el relleno inferior es de 70px.

Si la propiedad padding tiene dos valores:

• paddding: 50px 60px;
  • el relleno superior e inferior es de 50px.
  • el relleno derecho e izquierdo es de 60px.

Si la propiedad padding tiene un solo valor:

• padding: 50px;
  • todos los rellenos son de 50px.