Atributo CSS margin

Definición y uso

La propiedad abreviada de margen establece todas las propiedades de márgenes en una declaración. Esta propiedad puede tener de 1 a 4 valores.

Descripción

Esta propiedad abreviada establece el ancho de todos los márgenes de un elemento o el ancho de los márgenes de cada lado.

Los márgenes verticales adyacentes de los elementos de bloque se combinan, mientras que los elementos en línea no ocupan realmente los márgenes superior e inferior. Los márgenes laterales de los elementos en línea no se combinan. Del mismo modo, los márgenes de los elementos flotantes no se combinan. Se permite especificar valores negativos de margen, pero se debe usar con cuidado.

Notas:Se permite el uso de valores negativos.

Ejemplo 1

margen:10px 5px 15px 20px;
  • El margen superior es de 10px
  • El margen derecho es de 5px
  • El margen inferior es de 15px
  • El margen izquierdo es de 20px

Ejemplo 2

margen:10px 5px 15px;
  • El margen superior es de 10px
  • El margen derecho e izquierdo son de 5px
  • El margen inferior es de 15px

Ejemplo 3

margen:10px 5px;
  • El margen superior e inferior son de 10px
  • El margen derecho e izquierdo son de 5px

Ejemplo 4

margen:10px;
  • Todos los 4 márgenes son de 10px

Véase también:

Tutoriales de CSS:CSS margen exterior

Manual de referencia de HTML DOM:Atributo margen

Ejemplo

Establecer los 4 márgenes del elemento p:

p
  {
  margen:2cm 4cm 3cm 4cm;
  }

Prueba tú mismo

Sintaxis de CSS

margen: length|auto|initial|inherit;

Valor del atributo

Valor Descripción
auto El navegador calcula el margen.
length Se especifica el valor del margen en unidades específicas, como píxeles, centímetros, etc. El valor predeterminado es 0px.
% Se especifica el margen en porcentaje del ancho del elemento contenido.
inherit Se debe heredar el margen del elemento padre.

Detalles técnicos

Valor predeterminado: 0
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.margin="10px 5px"

Más ejemplos

Todas las propiedades de márgenes en una declaración
Este ejemplo muestra cómo establecer todas las propiedades de márgenes en una declaración.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que completamente admite esta propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5