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;
}
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;
.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Te ayudo?
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios