
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 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 y table y inline-table . |
Heredable | No |
Móvil | Sí |
Valor calculado | Un 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>
o <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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 3,0 | 3,5 | 1.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-top
,margin-right
ymargin-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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS