Está en la página 1de 4

GERENCIA VIRTUAL

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

Márgenes en CSS
Este elemento tiene un margen de 70 pixeles

La propiedad margin en CSS se utilizan para crear un espacio alrededor de los elementos, fuera de
cualquier borde establecido.
Con CSS, usted tiene el control total sobre los márgenes. Hay propiedades para establecer el
margen de cada lado de un elemento (superior, derecho, inferior e izquierda).

Margen - Lados individuales


CSS tiene propiedades para especificar el margen de cada lado de un elemento de manera
independiente:

 margin-top
 margin-right
 margin-bottom
 margin-left

Todas las propiedades de margen pueden tener los siguientes valores:

 Auto: el navegador calcula el margen.


 Length: especifica un margen en px, pt, cm, etc.
 %: especifica un margen en % de la anchura del elemento que contiene.
 inherit: especifica que el margen debe ser heredada de elemento padre.

Nota: Los valores negativos son permitidos.

El ejemplo siguiente define diferentes márgenes de los cuatro lados de un elemento <p>:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Ver: Código 39.html


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

Margen - Abreviando el código


Para acortar el código, es posible especificar todas las propiedades de los márgenes en una
propiedad. La propiedad margin es una propiedad abreviada para las siguientes propiedades de
los márgenes individuales:
 margin-top
 margin-right
 margin-bottom
 margin-left

Pues así es como funciona:


Si la propiedad margin tiene cuatro valores:

 margen: 25px 50px 75px 100px;


o margen superior es 25px
o margen derecho es 50px
o margen inferior es 75px
o margen izquierdo es de 100px

p {
margin: 25px 50px 75px 100px;
}

Ver: Código 40.html

Si la propiedad margin tiene tres valores:

 margen: 25px 50px 75px;


o margen superior es 25px
o márgenes derecho e izquierdo son 50px
o margen inferior es 75px

p {
margin: 25px 50px 75px;
}

Ver: Código 41.html


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

Si la propiedad margin tiene dos valores:


 margen: 25px 50px;
o márgenes superior e inferior son 25px
o márgenes derecho e izquierdo son 50px

p {
margin: 25px 50px;
}

Ver: Código 42.html

Si la propiedad margin tiene un valor:

 margen: 25px;
o los cuatro márgenes son 25px

p {
margin: 25px;
}

Ver: Código 43.html

Margen – Valor “auto”


Mediante la propiedad de margen auto se puede centrar horizontalmente el elemento en su
contenedor. El elemento tomará entonces hasta la anchura especificada, y el espacio restante se
dividirá por igual entre los márgenes izquierdo y derecho:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

Ver: Código 44.html


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

Margen – Valor “inherit”


En el siguiente ejemplo veremos como el párrafo <p class=”ejemplo1> hereda el margen de padre
(<div>):

div {
border: 1px solid red;
margin-left: 100px;
}

p.ejemplo1 {
margin-left: inherit;
}

Ver: Código 45.html

Solapar el margen
Los márgenes superior e inferior de los elementos a veces se solapan en un solo margen, el valor
real será igual al mayor de los dos valores. Esto no sucede en los márgenes izquierdo y derecho.
Sólo en márgenes superior e inferior. Mira el siguiente ejemplo:

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

Ver: Código 46.html

En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50 píxeles y el <h2> tiene un
margen superior de 20 píxeles. El sentido común parece indicar que el margen vertical entre el
<h1> y <h2> sería un total de 70 píxeles (50 px + 20 píxeles). Sin embargo, debido al colapso del
margen, ocurre una superposición, entonces el margen real termina siendo 50px, ya que es el
valor mayor.

También podría gustarte