Propiedad margin

margin

Propiedad margin establecer de algunos o todos los cuatro márgenes de un elemento

Cada margen define su propio valor por defecto

Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo valor a todos los márgenes de un elemento:


#contenedor {
margin: 100px;
}

Permite establecer uno, dos, tres o los cuatro márgenes de forma simultánea.


  • Si se indican dos valores, el primero hace referencia a los márgenes verticales y el segundo es el valor de los márgenes horizontales:
#contenedor{
margin: 100px 50px;
}
Equivale a:
#contenedor{
margin-top: 100px;
margin-right: 50px;
margin-bottom: 100px;
margin-left: 50px;
}

  • Si se indican tres valores, el primero hace referencia al margen superior, el segundo es el valor de los márgenes horizontales y el tercero es el margen inferior:

#contenedor{
margin: 20px 30px 40px;
}
Equivale a:
#contenedor{
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 30px;
}

  • Si se indican cuatro valores, el primero es el margen superior, el segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el margen izquierdo, de modo que las siguientes reglas CSS son equivalentes:
#contenedor {
margin: 10px 20px 30px 40px;
}

Equivale a:

#contenedor {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
✔ Nota
margin-top:  margen superior
margin-right: margen derecho
margin-bottom: margen inferior
margin-left: margen izquierdo





Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top