Lección 10: Padding

Añade espacio, o relleno, entre el elemento y su contenido.

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

Resumida.

.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

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;.

9-1 9-2 9-3

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 paga 1 mes de servidor.
3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario