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

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario