El relleno de un elemento es la cantidad de espacio entre el borde y el contenido del elemento. Su funcionamiento es muy similar al de los márgenes, aunque aquí no puede haber valores negativos. El margen es el espacio que se pretende fijar por fuera del borde (entre esta caja y las demás) y el relleno es la separación interior entre el borde y el contenido (texto, gráfico,...) del elemento.
El padding se divide en cuatro segmentos: top (superior), bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir padding-left, padding-right, padding-top y padding-bottom.
Sintaxis: padding-top: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad padding-top establece el relleno superior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten márgenes negativos.
Por ejemplo, la siguiente regla eliminaría el relleno superior de un párrafo:
p { padding-top: 0 }
Sintaxis: padding-right: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad padding-right establece el relleno derecho de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten márgenes negativos.
Por ejemplo:
p.estrecho { padding-right: 50% }
Sintaxis: padding-bottom: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad padding-bottom establece el relleno inferior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten márgenes negativos.
Sintaxis: padding-left: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad padding-left establece el relleno izquierdo de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten márgenes negativos.
Sintaxis: padding: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad padding establece los rellenos de un elemento especificando entre uno y cuatro valores, donde cada valor es una longitud, un porcentaje o auto. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten márgenes negativos.
En la propiedad padding se puede indicar de uno a cuatro valores, que se interpretan de la siguiente manera: