Características margin-top en CSS

La propiedad margin-top CSS establece el margen en el extremo superior del elemento, los valores positivos acercarán el elemento y los valores negativos lo acercarán.

Funciones margin-top css

Valor inicial	`0`
Aplicado a	Todos los elementos, excepto los elementos de la tabla en los que el valor de la propiedad no es igual a `display` una de las palabras reservadas `table-caption`, `table` y `inline-table`.
Heredable	No
Móvil	Sí
Valor calculado	Un porcentaje o longitud absoluta.

/*  longitudes */ 
margin-top :  10px;   /* longitud absoluta */ 
margin-top :  1em;    /* longitud relativa del tamaño de fuente */ 
margin-top :  5%;     /* Longitud relativa para mostrar el contenedor de bloques más cercano */
/* palabras reservadas */ 
margin-top :  auto ;
/* valores globales */ 
margin-top: inherit;
margin-top: initial;
margin-top: unset;

Ejemplos y aplicaciones en código

Usaremos el elemento

en el siguiente ejemplo para mostrar el efecto de diferentes tipos de valores para la propiedad margin-top:

< div class="parent" >
  < div class="margin-em" > margin-top: 1em; 
  < div class="margin-px" > margin-top: 10px; 
  < div class="margin-percent" > margin-top: 10%;

Código CSS:

.parent {
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  margin: 1em;
}
.parent > div {
  padding: 0.25em;
  background-color: #069;
  color: white;
}
.margin-em      { margin-top: 1em; }
.margin-px      { margin-top: 10px; }
.margin-percent { margin-top: 10%; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	3,0	3,5	1.0

Características generales

La propiedad acepta margin-top un valor único que puede ser una longitud , un porcentaje o una palabra reservada auto, y cada valor puede ser positivo, negativo o cero.

auto

El navegador elegirá el valor de margen apropiado para usar, consulte la página de propiedades margin para obtener más información.

Determine el valor del margen en longitudes absolutas.

Especifica el valor del margen como un porcentaje del ancho del elemento de bloque que contiene el elemento actual.

Estructura margin-top css

margin-top:  |  | auto;

Consulte también

La página margin y la página subpropiedades que este conjunto de propiedades son: margin-bottom, margin-right y margin-left.
En la página de propiedades padding establece la anotación en los cuatro extremos del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.