Propiedad margin-top

DefiniciónEstablece la anchura del margen superior de los elementos de bloque
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra
Valor inicial0
Se aplica aTodos los elementos, salvo los elementos en línea que no sean imágenes
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-margin-top

Ejemplos de uso

Para los elementos de bloque y las imágenes, la propiedad margin-top establece la anchura de su margen superior, como se muestra en el siguiente ejemplo:

div { margin-top: 20px; }

También es posible utilizar valores negativos en el margen superior. En el siguiente ejemplo, el <div> tiene un margen superior de -20px, lo que en la práctica implica que el elemento "se sale" por la parte superior de su elemento contenedor:

div { margin-top: -20px; }

Si se utilizan porcentajes, su referencia es la anchura del elemento contenedor. Si no se ha establecido de forma explícita una anchura, se sustituye por el valor auto.

El aspecto más importante relacionado con los márgenes es que CSS fusiona de forma automática los márgenes verticales de los elementos de bloque.

Si en una página web dos elementos de bloque contiguos definen sus propios márgenes verticales (mediante las propiedades margin-top y margin-bottom), el navegador los fusiona de forma automática y muestra un margen vertical igual al mayor de los dos márgenes verticales.

En el siguiente ejemplo, el primer <div> define un margen inferior de 40px, mientras que el segundo <div> define un margen superior de 20px. Como se trata de dos márgenes verticales contiguos, el navegador los fusiona y se queda con el más grande (en este caso, los 40px):

div { margin-bottom: 40px; }
div { margin-top: 20px; }

La fusión automática de márgenes verticales no se realiza en los elementos posicionados mediante la propiedad float y en los elementos posicionados de forma absoluta (position: absolute).