Lección 13: Padding

A diferencia al margin, añade relleno entre el elemento y su contenido. Sin embargo no es gratis utilizarlo, es peligroso en un diseño muy ajustado ya que ocupa espacio y aumenta la anchura o altura del elemento. Puedes remediarlo con box-sizing: border-box; que aprenderemos en la siguiente lección.

padding-top

Relleno superior.

.elemento {
    padding-top: 1rem;
}

padding-right

Relleno derecha.

.elemento {
    padding-right: 2rem;
}

padding-bottom

Relleno inferior.

.elemento {
    padding-bottom: 3rem;
}

padding-left

Relleno izquierda.

.elemento {
    padding-left: 4rem;
}

padding-inline

Relleno izquierda y derecha.

.elemento {
    padding-inline: 5rem;
}

Para aplicar un relleno diferente a cada lado, podemos utilizar la siguiente sintaxis:

.elemento {
    padding-inline: 5rem 1rem;
}

Siendo el primer valor el relleno izquierdo y el segundo el derecho.

padding-block

Relleno superior e inferior.

.elemento {
    padding-block: 6rem;
}

Para aplicar un relleno diferente a cada lado, podemos utilizar la siguiente sintaxis:

.elemento {
    padding-block: 6rem 1rem;
}

Siendo el primer valor el relleno superior y el segundo el inferior.

padding

Nos permite definir varios lados en una solia línea, aunque es un poco más complejo de memorizar.

.elemento {

    /* Todos los lados */
    padding: 5rem;

    /*
    Arriba y abajo: 6rem
    Derecha e izquierda: 1rem
    */
    padding: 6rem 1rem;

    /*
    Arriba: 6rem
    Derecha e izquierda: 3rem
    Abajo: 1rem
    */
    padding: 6rem 3rem 1rem;

    /*
    Arriba: 1rem
    Derecha: 2rem
    Abajo: 3rem
    Izquierda: 4rem
    */
    padding: 1rem 2rem 3rem 4rem;


}

Más información

Actividad 1

Implementa la siguiente imagen en HTML.

Mailchimp marketing

Actividad 2

Implementa solo una de las columnas, la que prefieras.

Si te sientes con fuerza, implementa la tabla entera.

Tabla de precios

Actividad 3

Implementa la siguiente imagen.

No uses tablas. Respecto al + o - puedes ignorarlo. Además sería interesante que dispusieras una clase llamada open para ver u ocultar (en su asuencia) el texto.

Acordeón