Ejemplo
Establecer los cuatro márgenes de un <div> elemento:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px"; Inténtalo tú mismo " Definición y Uso
Los conjuntos de propiedades de margen o devuelve los márgenes de un elemento.
Esta propiedad puede tomar de uno a cuatro valores:
- Uno de los valores, como: div {margin: 50px} - los cuatro márgenes será 50px
- Dos valores, como: div {margin: 50px 10px} - los márgenes superior e inferior serán 50px, márgenes izquierdo y derecho serán 10px
- Tres valores, como: div {margin: 50px 10px 20px} - el margen superior será 50px, izquierda y margen derecha será 10px, el margen inferior será de 20 píxeles
- Cuatro valores, como: div {margin: 50px 10px 20px 30px} - el margen superior será 50px, margen derecho será 10px, el margen inferior será de 20 píxeles, margen izquierdo será 30px
Tanto la propiedad de margen y el espacio de inserción propiedad padding alrededor de un elemento. Sin embargo, la diferencia es que el margen inserta el espacio alrededor de la frontera, mientras que el relleno inserta el espacio dentro del borde de un elemento.
Soporte del navegador
La propiedad margin es compatible con todos los principales navegadores.
Sintaxis
Devolver la propiedad margin:
object .style.margin
Establecer la propiedad margin:
object .style.margin=" Valores de propiedad Valor Descripción % Define los márgenes en% de la anchura del elemento padre length Define los márgenes en unidades de longitud auto El navegador establece los márgenes (all four margins will be equal) initial Establece esta propiedad a su valor por defecto. Lea acerca inicial inherit Hereda esta propiedad de su elemento padre. Lea acerca de heredar
Detalles técnicos
Valor por defecto: 0 Valor de retorno: Una cadena, que representa los márgenes de un elemento Versión CSS CSS1
Más ejemplos
Ejemplo
Cambiar los cuatro márgenes de un <div> elemento de "25px" :
document.getElementById("myDiv").style.margin = "25px";
Inténtalo tú mismo "
Ejemplo
Devolver los márgenes de un <div> elemento:
alert(document.getElementById("myDiv").style.margin);
Inténtalo tú mismo "
Ejemplo
Diferencia entre la propiedad y el margen de la propiedad padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Inténtalo tú mismo "
Páginas relacionadas
CSS tutorial: Margen CSS
Referencia CSS: margin property
<Estilo de objeto