CSS Relleno

Deja un espacio entre el elemento y los bordes del mismo.


Relleno con CSS

El relleno se comporta exactamente igual que los márgenes con la excepción que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.

Modelo de cajas

Las propiedades del relleno padding nos permiten definir el ancho de los mismos.


El relleno - padding

La propiedad padding se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo.

Esta propiedad define el ancho para los cuatro lados de la caja.

Sintaxis

<head>
<style="type:text/css">
selector {padding: valor}
</style>
</head>

Los posibles valores para definir los anchos de padding

longitud | %

Ejemplo

Vamos a ver como se comporta un texto con un relleno de 10% alrededor.

Código
<head>
<style type="text/css">
p.relleno{padding:10%}
</style>
</head>

<body>
<p>En este ejemplo podemos observar que el relleno
se aleja de los borde un 10% en base al tamaño de la
caja que lo contiene.Al no haber definido los bordes o
los margenes, el ancho del relleno es la distancia
definida.</p>
</body>
Resultado

En este ejemplo podemos observar que el relleno
se aleja de los borde un 10% en base al tamaño de la caja que lo contiene. Al no haber definido los bordes o los margenes, el ancho del relleno es la distancia definida.


El relleno de cada lado - padding-top, padding-right, padding-bottom, padding-left

Las propiedades padding-top, padding-right, padding-bottom, padding-left se utilizan para definir los anchos de los rellenos de cada uno de los bordes por separado.
Puedes definir los 4 lados o solo aquellos que necesites.

Sintaxis

<head>
<style="type:text/css">
selector {
padding-top: valor
padding-right: valor
padding-bottom: valor
padding-left: valor
}
</style>
</head>

Los posibles valores para definir los anchos de padding

longitud | %

Ejemplo

Vamos a definir el ancho de cada lado por separado.

Código
<head>
<style type="text/css">
p{
padding-top:30px
padding-right:10px
padding-bottom:20px
padding-left:50%
}
</style>
</head>

<body>
<p>Este texto tiene definido un ancho distinto para cada
lado del elemento.</p>
</body>
Resultado

Este texto tiene definido un ancho distinto para cada lado del elemento.


Tabla de las propiedades de padding (relleno)

PropiedadDescripciónValoresDetallesEj.
padding Tamaños para varios padding individuales.

padding-top: ancho del padding superior.

padding-right: ancho del padding derecho.

padding-bottom: ancho del padding inferior.

padding-left: ancho del padding derecho.
longitud Longitud Ejemplo de como definir el ancho del padding
% Porcentaje Ejemplo de como definir el ancho del padding en porcentajes


<<< Tablas - Table en CSS Bordes - Border en CSS >>>

En la Web