Característica del Margin en CSS

por
CSS Margin

Tabla de contenidos

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 inicialPara cada función corta: margin-bottom, margin-left, margin-right, margin-top. 
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, table y inline-table.
HeredableNo
MóvilSi
Valor calculadoUn 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

Código CSS:

.outside {
  margin: 3rem 0 0 -3rem;
  background-color: #060;
  width: 50%;
  color: white;
}

Soporte del margin en navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
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  , un porcentaje  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.

Determina 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 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.