Características margin-bottom en CSS

por
Características margin-bottom en CSS

La propiedad margin-bottom en CSS establece el margen en el extremo inferior del elemento, los valores positivos acercarán el elemento a él y los valores negativos lo acercarán.

Funciones margin-bottom css

Valor inicial0
Aplicado aTodos 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 y table y inline-table.
HeredableNo
MóvilSí
Valor calculadoUn porcentaje o longitud absoluta.
/*  longitudes */ 
margin-bottom:  10px;   /* longitud absoluta */ 
margin-bottom:  1em;    /* longitud relativa del tamaño de fuente */ 
margin-bottom:  5%;     /* Longitud relativa para mostrar el contenedor de bloques más cercano */
/* palabras reservadas */ 
margin-bottom:  auto;
/* valores globales */ 
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;

Esta propiedad no tendrá ningún efecto en los elementos en línea no reemplazados, como  o .

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-bottom:

< div  class = "parent" > 
  < div  class = "margin-em" > margin-bottom: 1em;  
  < div  class = "margin-px" > margin-bottom: 10px;  
  < div  class = "margin-percent" > margin-bottom: 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-bottom: 1em;  }
.margin-px      { margin-bottom: 10px; }
.margin-percent { margin-bottom: 10%;  }

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.03,03,51.0

Características general

La propiedad acepta margin-bottom 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-bottom css

margin-bottom:  |  | auto;

Consulte también

  • La página margin y la página subpropiedades que este conjunto de propiedades son: margin-top, 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.