Características margin-bottom en CSS

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-captiontableinline-table.
HeredableNo
Móvil
Valor calculadoUn porcentaje o longitud absoluta.
/* <length> 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 <strong><span>.

Ejemplos y aplicaciones en código

Usaremos el elemento <div> 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 > 
  < div  class = "margin-px" > margin-bottom: 10px; </ div > 
  < div  class = "margin-percent" > margin-bottom: 10%; </ div > 
</ div >

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 <length>, un porcentaje <percentage> 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.

<length>

Determine el valor del margen en longitudes absolutas.

<percentage>

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: <length> | <percentage> | auto;

Consulte también

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