CSS: Padding (Relleno)

CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento:

padding-top
padding-right
padding-bottom
padding-left
relleno superior
relleno derecho
relleno inferior
relleno izquierdo
Descripción Establece cada uno de los rellenos horizontales y verticales de unelemento
valores <medida> | <porcentaje> | inherit
Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla
Valor inicial 0

La siguiente imagen muestra la diferencia entre el margen y el relleno de los elementos:

El código HTML y CSS del ejemplo se muestra a continuación:

.margen {
margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em;
}
.relleno {
padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em;
}

<p class="margen">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>
<p class="relleno">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>

Como sucede con la propiedad margin, CSS también define una propiedad de tipo "shorthand" para establecer los cuatro rellenos de un elemento de forma directa. Sirvan los siguientes ejemplos:

body {padding: 2em} /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior =3em, izquierdo = 4em */

Las unidades más utilizadas para indicar los rellenos de un elemento son:
a) píxeles (cuando se requiere una precisión total)
b) em (para hacer diseños que mantengan las proporciones)
c) porcentajes (para hacer diseños líquidos o fluidos).

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO