Lección 10: 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

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

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café — Pulsa sobre la imagen

1 café: Se mantiene el dominio durante 4 meses.
2 cafés: Se liquida 1 mes del Servidor Web.
3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario