
Tabla de contenidos
- Funciones del Margin
- Ejemplos CSS de Margin
- Soporte del margin en navegadores
- Estructura General del Margin
- Notas Importantes
El margin
en CSS es la forma abreviada para la propiedad que establece los márgenes en los cuatro extremos del elemento, y esta propiedad se puede utilizar en lugar de establecer los márgenes de forma individual con margin-top
, margin-right
, margin-bottom
y margin-left
.
Funciones del Margin
Valor inicial | Para cada función corta: margin-bottom , margin-left , margin-right , margin-top . |
---|---|
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 | Si |
Valor calculado | Un porcentaje o longitud absoluta. |
/* Aplicar márgenes a los cuatro lados */ margin: 1em; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* valores globales */ margin: inherit; margin: initial; margin: unset;
Ejemplos CSS de Margin
Para ajustar los márgenes en todos los bordes a 5%
la anchura del elemento de bloque que contiene el elemento de destino:
margin : 5%;
Para establecer los márgenes en todos los lados para 10px
:
margin : 10px;
Para establecer los márgenes en los extremos superior e inferior en 1.6em
, y los extremos izquierdo y derecho en 20px
, usaremos la regla:
margin : 1.6em 20px ;
Para establecer los márgenes en el extremo superior en 10px
, el borde inferior en 1em
y los extremos izquierdo y derecho en 3%
, usaremos la regla:
margin : 10px 3% 1em ;
La propiedad margen puede ser usado para fijar los valores de la margin-top
, margin-right, margin-bottom y margin-left todos los atributos de la regla es:
margin : 10px 3px 30px 5px ;
Las siguientes reglas son equivalentes:
margin-top : 10px ; margin-right : 3px ; margin-bottom : 30px ; margin-left : 5px ;
La palabra reservada se puede usar auto
con los márgenes izquierdo y derecho para centrar el elemento verticalmente. Tenga en cuenta que la siguiente regla establece los márgenes superior e inferior en 2em
:
margin : 2em auto;
La siguiente regla es centrar el elemento horizontalmente, pero hace que los márgenes superior e inferior sean iguales a cero:
margin : auto;
Tenga en cuenta que los márgenes se pueden usar para sangrar un elemento fuera de los límites de su contenedor:
< div class = "outside" > Este elemento se coloca fuera de su contenedor </div>
Código CSS:
.outside { margin: 3rem 0 0 -3rem; background-color: #060; width: 50%; color: white; }
Soporte del margin en navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 3,0 | 3,5 | 1.0 |
Estructura General del Margin
La propiedad acepta margin
uno, dos, tres o cuatro valores, y cada valor puede ser <longitud> , un porcentaje <percentage>
o una palabra reservada auto
, y cada valor puede ser positivo, negativo o cero.
- Cuando se especifica un solo valor, se aplicará a todos los lados.
- Cuando se especifican dos valores, el primer valor se aplicará a los extremos superior e inferior, y el segundo valor a los extremos izquierdo y derecho.
- Cuando se especifican tres valores, el primer valor se aplicará al extremo superior, el segundo valor a los extremos izquierdo y derecho y el tercer valor al extremo inferior.
- Cuando se especifican cuatro valores, los valores se aplicarán al extremo superior, luego al lado derecho, luego al inferior y luego al izquierdo, respectivamente (es decir, la rotación comienza desde el extremo superior y continúa en el sentido de las agujas del reloj).
auto
El navegador elegirá el valor de márgenes apropiado para usar y, en algunos casos, este valor se puede usar para centrar un elemento.
<length>
Determina 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 css
margen : [ < longitud > | < porcentaje > | auto ] { 1,4 } ;
Notas Importantes
centrado horizontal
Un elemento se puede centrar horizontalmente usando las dos reglas display: flex; justify-content: center;
.
Pero los navegadores más antiguos no son compatibles con el diseño de flexbox, y las dos reglas anteriores no funcionarán para centrar el elemento dentro de su uso del elemento principal margin: 0 auto;
.
fusionar márgenes
A veces, los márgenes superior e inferior de dos elementos se combinan en un único margen igual al mayor de los márgenes.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS