18-margens en css

Las margens en css se utilizan para crear espacios, alrededor de los elementos, fuera de los bordes defenidos

ejemplo

Este elemento tiene un margen de 60px

CSS tiene propriedades para defenir las margens

• margin-top - define el espacio desde el topo hasta el elemento html
• margin-right - define el espacio entre el elemento html y la margen derecha
• margin-bottom - define el espacio entre el elemento html y el proximo elemento abajo
• margin-left - define el espacio entre la margen esquerda y el elemento html

...

ejemplos

Este elemento tiene un margen de 60px desde su top

Cuando hacemos un top, quiere decir el elemento que esta pot encima

ejemplos

Este elemento tiene un margen de 60px desde su derecha

ejemplos

Este elemento tiene un margen de 60px desde su elemento inferior (bottom)

ejemplos

Este elemento tiene un margen de 60px desde su esquierda

Valores de los margens

En CSS las propriedades tambien tienen valores, que siguen una ordem

• Arriba
• derecha
• abajo
• esquierda

Si ya vistens la entrada de valores de bordes Valores de los bordes

con los margens en css pasa exactamente lo mismo los valores van en la seguinte orden

primer valor es el de arriba, el segundo es de la derecha, el tercero es el de abajo y el ultimo el de esquierda

ejemplo

elemento que tiene de margin 50px por todos los lados

Codigo fuente

    <div style="background-color: aqua; margin: 50px 50px 50px 50px; border:1px solid black; padding: 10px;">
    elemento que tiene de margin 50px por todos los lados
</div><br>

---

Colapso de margen

Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes.

¡Esto no sucede en los márgenes izquierdo y derecho! ¡Solo márgenes superior e inferior!

Ir al indice

---