Style margin ominaisuus

Määrittely ja käyttö

margin Asettaa tai palauttaa elementin ulonkorkeuden.

Tämä ominaisuus voi käyttää yhdestä neljään arvoa:

  • Yksi arvo, esimerkiksi: div {margin: 50px} - Kaikki neljä ulonkorkeus on 50px
  • Kaksi arvoa, esimerkiksi: div {margin: 50px 10px} - Ylä- ja alaväli ulonkorkeus on 50px, vasen ja oikea ulonkorkeus on 10px
  • Kolme arvoa, esimerkiksi: div {margin: 50px 10px 20px} - Ylä-ulonkorkeus on 50px, vasen ja oikea ulonkorkeus on 10px, alaväli ulonkorkeus on 20px
  • Neljä arvoa, esimerkiksi: div {margin: 50px 10px 20px 30px} - yläulkoreunusväli on 50px, oikea ulkoreunusväli on 10px, alapuoli ulkoreunusväli on 20px ja vasen ulkoreunusväli on 30px

Molemmat margin- ja padding-ominaisuudet lisäävät tilaa elementin ympärille. Mutta ero on siinä, että margin lisää tilaa reunan ympärille, kun taas padding lisää tilaa elementin reunan sisälle.

Katso myös:

CSS-opas:CSS:n ulkoreuna

CSS-ohjeet:margin-ominaisuus

Esimerkki

Esimerkki 1

Aseta <div>-elementin kaikki neljä ulkoreunusväliä:

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

Kokeile itse

Esimerkki 2

Muuta <div>-elementin kaikki neljä ulkoreunusväliä arvoksi "25px":

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

Kokeile itse

Esimerkki 3

Palauta <div>-elementin ulkoreunusväli:

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

Kokeile itse

Esimerkki 4

margin-ominaisuuden ja padding-ominaisuuden ero:

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

Kokeile itse

Syntaksi

Palauta margin-ominaisuus:

object.style.margin

Aseta margin-ominaisuus:

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

Ominaisuuden arvo

Arvo Kuvaus
% Määritä ulkoreunusväli vanhemman elementin leveyden prosentteina.
length Määritä ulkoreunusväli pituusyksiköillä.
auto Selaimeen asetetut ulkoreunusvälit (kaikki neljä ulkoreunusvälit ovat yhtä suuria).
initial Aseta tämä ominaisuus sen oletusarvon arvoksi. Katso: initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: 0
Palautusarvo: Merkki, joka ilmaisee elementin ulkoreunusvälit.
CSS versio: CSS1

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki