Margen de estilo Propiedad
Ejemplo
Establezca los cuatro márgenes de un elemento <div>:
document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";
Definición y uso
La propiedad margin establece o devuelve los márgenes de un elemento.
Esta propiedad puede tomar de uno a cuatro valores:
- Un valor, como: div {margin: 50px} - los cuatro márgenes serán 50px
- Dos valores, como: div {margin: 50px 10px}: los márgenes superior e inferior serán de 50 px, los márgenes izquierdo y derecho serán de 10 px
- Tres valores, como: div {margen: 50px 10px 20px}- el margen superior será de 50px, el margen izquierdo y derecho será de 10px, el margen inferior será de 20px
- Cuatro valores, como: div {margen: 50px 10px 20px 30px} - el margen superior será de 50px, el margen derecho será de 10px, el margen inferior será de 20px, el margen izquierdo será de 30px
Tanto la propiedad de margen como la propiedad de relleno insertan espacio alrededor de un elemento. Sin embargo, la diferencia es que margin inserta el espacio alrededor del borde, mientras que padding inserta el espacio dentro del borde de un elemento.
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| margin | Yes | Yes | Yes | Yes | Yes |
Sintaxis
Devuelve la propiedad de margen:
object.style.margin
Establezca la propiedad de margen:
object.style.margin = "%|length|auto|initial|inherit"
Valores de propiedad
| Value | Description |
|---|---|
| % | Defines the margins in % of the width of the parent element |
| length | Defines the margins in length units |
| auto | The browser sets the margins (all four margins will be equal) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detalles técnicos
| Valor por defecto: | 0 |
|---|---|
| Valor devuelto: | Una cadena, que representa los márgenes de un elemento. |
| Versión CSS | CSS1 |
Más ejemplos
Ejemplo
Cambie los cuatro márgenes de un elemento <div> a "25px":
document.getElementById("myDiv").style.margin = "25px";
Ejemplo
Devuelve los márgenes de un elemento <div>:
alert(document.getElementById("myDiv").style.margin);
Ejemplo
Diferencia entre la propiedad de margen y la propiedad de relleno:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
páginas relacionadas
Tutorial CSS: Margen CSS
Referencia CSS: propiedad de margen
❮ Objeto de estilo