Atributo de estilo margen

Definición y uso

margen La propiedad establece o devuelve el margen del elemento.

Esta propiedad puede usar de uno a cuatro valores:

  • Un valor, por ejemplo: div {margen: 50px} - Todos los cuatro márgenes externos son 50px
  • Dos valores, por ejemplo: div {margen: 50px 10px} - El margen superior e inferior es de 50px, y el margen izquierdo y derecho es de 10px
  • Tres valores, por ejemplo: div {margen: 50px 10px 20px} - El margen superior externo es de 50px, el margen izquierdo y derecho externo es de 10px, y el margen inferior externo es de 20px
  • Cuatro valores, por ejemplo: div {margin: 50px 10px 20px 30px} - El margen superior es de 50px, el margen derecho es de 10px, el margen inferior es de 20px y el margen izquierdo es de 30px}

Las propiedades margin y padding insertan espacio alrededor del elemento. Sin embargo, la diferencia radica en que margin inserta espacio alrededor del borde, mientras que padding inserta espacio dentro del borde del elemento.

Vea también:

Tutoriales de CSS:Margen externo de CSS

Manual de referencia de CSS:Atributo margin

Ejemplo

Ejemplo 1

Establece todos los cuatro márgenes del elemento <div>:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Pruebe usted mismo

Ejemplo 2

Cambia todos los cuatro márgenes del elemento <div> a "25px":

document.getElementById("myDiv").style.margin = "25px";

Pruebe usted mismo

Ejemplo 3

Retorna el margen del elemento <div>:

alert(document.getElementById("myDiv").style.margin);

Pruebe usted mismo

Ejemplo 4

La diferencia entre las propiedades margin y padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Pruebe usted mismo

Sintaxis

Retornar el atributo margin:

object.style.margin

Establecer el atributo margin:

object.style.margin = "%|length|auto|initial|inherit"

Valor del atributo

Valor Descripción
% Se define el margen en porcentaje de la anchura del elemento padre.
length Se define el margen con una unidad de longitud.
auto El navegador configura el margen exterior (todos los cuatro márgenes serán iguales).
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: 0
Valor de retorno: Cadena, que representa el margen exterior del elemento.
Versión de CSS: CSS1

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte