Te doy la bienvenida a proyecto on line, en este sitio vas a hallar la solucíon que buscas.
los margin-bottomCSS La propiedad establece el área de margen en la parte inferior de un elemento. Un valor positivo lo coloca más lejos de sus vecinos, mientras que un valor negativo lo coloca más cerca.
Esta propiedad no tiene ningún efecto sobre no reemplazado elementos en línea, como
Sintaxis
/*values */ margin-bottom: 10px;/* An absolute length */margin-bottom: 1em;/* relative to the text size */margin-bottom: 5%;/* relative to the nearest block container's width *//* Keyword values */margin-bottom: auto;/* Global values */margin-bottom: inherit;margin-bottom: initial;margin-bottom: unset;
los margin-bottom la propiedad se especifica como la palabra clave autoo un
Valores
- El tamaño del margen como valor fijo.
- El tamaño del margen como porcentaje, en relación con el ancho del bloque contenedor.
auto- El navegador selecciona un valor adecuado para usar. Ver
margin.
Definicion formal
| Valor inicial | 0 |
|---|---|
| Se aplica a | todos los elementos, excepto los elementos con tabla display tipos distintos a table-caption, table y inline-table. También se aplica a ::first-letter y ::first-line. |
| Heredado | no |
| Porcentajes | referirse al ancho del bloque contenedor |
| Valor calculado | el porcentaje especificado o la longitud absoluta |
| Tipo de animación | una longitud |
Sintaxis formal
| | auto
Ejemplos de
Establecer márgenes inferiores positivos y negativos
HTML
<divclass="container"><divclass="box0">Box 0div><divclass="box1">Box 1div><divclass="box2">Box one's negative margin pulls me updiv>div>
CSS
CSS para divs para establecer el margen inferior y la altura
.box0margin-bottom:1em;height:3em;.box1margin-bottom:-1.5em;height:4em;.box2border:1px dashed black;border-width:1px 0;margin-bottom:2em;
Algunas definiciones de contenedor y divs para que los efectos de los márgenes se vean más claramente
.containerbackground-color:orange;width:320px;border:1px solid black;divwidth:320px;background-color:gold;
Resultado
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| Modelo de caja básica CSS La definición de 'margin-bottom' en esa especificación. |
Recomendación candidata | Sin cambios significativos |
| CSS Nivel 2 (Revisión 1) La definición de 'margin-bottom' en esa especificación. |
Recomendación | Elimina su efecto en elementos en línea. |
| Nivel 1 de CSS La definición de 'margin-bottom' en esa especificación. |
Recomendación | Definición inicial |
Compatibilidad del navegador
| Escritorio | Móvil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cromo | Borde | Firefox | explorador de Internet | Ópera | Safari | WebView Android | Chrome Android | Firefox para Android | Opera Android | Safari en IOS | Internet de Samsung | |
margin-bottom |
1 | 12 | 1 | 3 | 3,5 | 1 | 1 | 18 | 4 | 10.1 | 1 | 1.0 |
auto |
1 | 12El auto El valor no se admite en el modo de peculiaridades. |
1 | 6El auto El valor no se admite en el modo de peculiaridades. |
3,5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |
Ver también
margin-top,margin-right, ymargin-lefty elmargintaquigrafía- Las propiedades lógicas mapeadas:
margin-block-start,margin-block-end,margin-inline-start, ymargin-inline-endy los taquigrafíamargin-blockymargin-inline
Tienes la opción de añadir valor a nuestra información asistiendo con tu veteranía en las referencias.