Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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).
margin-top
margin-right
margin-bottom
margin-left
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;
}
p {
margin: 25px 50px 75px 100px;
}
p {
margin: 25px 50px 75px;
}
p {
margin: 25px 50px;
}
margen: 25px;
o los cuatro márgenes son 25px
p {
margin: 25px;
}
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
div {
border: 1px solid red;
margin-left: 100px;
}
p.ejemplo1 {
margin-left: inherit;
}
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;
}
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.