GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Relleno en CSS (Padding)

La propiedad margin, permite separar al elemento de los elementos que tenga a su lado, mientras
que la propiedad padding separa al elemento de los bordes de su contenedor.

Este elemento tiene un margen de 70 pixeles

La propiedad padding de CSS se utilizan para generar espacio alrededor del contenido de un
elemento, en el interior de cualquier borde definidos. Con CSS, usted tiene el control total sobre el
relleno. Hay propiedades para configurar el relleno para cada lado de un elemento (superior,
derecho, inferior e izquierda).

Padding – Lados individuales

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:
 padding-top
 padding-right
 padding-bottom
 padding-left

Todas las propiedades del relleno pueden tener los siguientes valores:

 length: especifica un relleno en px, pt, cm, etc.

 %: especifica un relleno en % de la anchura del elemento que contiene.
 Inherit: especifica que el relleno debe ser heredada del elemento padre.

Nota: Los valores negativos no están permitidos.

El ejemplo siguiente establece diferente relleno para los cuatro lados de un elemento <div>:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Ver: Código 47.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Padding - Abreviando el código

Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad.
La propiedad padding es una propiedad abreviada para las siguientes propiedades de los
márgenes individuales:

 padding-top
 padding-right
 padding-bottom
 padding-left

Funciona de la siguiente manera:

Si la propiedad padding tiene cuatro valores:
 padding: 25px 50px 75px 100px;
o el relleno superior es 25px
o el relleno derecho es 50px
o el relleno inferior es 75px
o el relleno a la izquierda es 100px

div {
padding: 25px 50px 75px 100px;
}

Ver: Código 48.html

Si la propiedad padding tiene tres valores:

 padding: 25px 50px 75px;
o el relleno superior es 25px
o el relleno derecho e izquierdo de 50px
o el relleno inferior es 75px

div {
padding: 25px 50px 75px;
}

Ver: Código 49.html

Si la propiedad padding tiene dos valores:

 padding: 25px 50px;
o el relleno superior e inferior de 25px
o el relleno derecho e izquierdo 50px
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

div {
padding: 25px 50px;
}

Ver: Código 50.html

Si la propiedad padding tiene un valor:

 padding: 25px;
o el relleno superior, inferior, derecha e izquierda de 25px

div {
padding: 25px;
}

Ver: Código 51.html

Padding y ancho de los elementos

La propiedad width especifica el ancho del área de contenido del elemento. El área de contenido
es la parte interior del relleno, borde y el margen de un elemento ( el modelo de caja ).

Así, si un elemento tiene un ancho especificado, el relleno añadido a dicho elemento será añadido
a la anchura total del elemento. Esto es a menudo un resultado no deseable.

En el siguiente ejemplo, al elemento <div> se le da un ancho de 300 píxeles. Sin embargo, el ancho
representado real del elemento <div> será 350 píxeles (300px + 25px de relleno a la izquierda +
25px de relleno derecho):

div {
width: 300px;
padding: 25px;
}

Ver: Código 52.html

Para mantener la anchura en 300 píxeles, no importa la cantidad de relleno, se puede utilizar la
propiedad box-sizing . Esto hace que el elemento mantenga su ancho; si aumenta el relleno, el
espacio contenido disponible disminuirá. A continuación un ejemplo:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

Ver: Código 53.html