CSS margin ominaisuus

Määrittely ja käyttö

margin-lyhennetty ominaisuus asettaa kaikki ulkoreunat yhdessä lausekkeessa. Tämä ominaisuus voi olla 1-4 arvoa.

Selitys

Tämä lyhennetty ominaisuus asettaa elementin kaikkien ulkoreunien leveyden tai asettaa jokaisen reunan yläreunavälin leveyden.

Rivivälistä elementtien vertikaaliset yhdysreunat yhdistyvät, ja riveittäin elementit eivät oikeastaan ole mukautettuja ylös- ja alas reunaväleihin. Riveittäin elementtien vasen ja oikea reunaväli eivät yhdisty. Samoin kuin liukuvien elementtien reunaväli ei yhdisty. Negatiiviset reunaväliarvot ovat sallittuja, mutta niiden käyttö on varottavaa.

Huomautus:Negatiiviset arvot ovat sallittuja.

Esimerkki 1

margin:10px 5px 15px 20px;
  • Yläpuolinen reunaväli on 10px
  • Oikea reunaväli on 5px
  • Alapuolinen reunaväli on 15px
  • Vasen reunaväli on 20px

Esimerkki 2

margin:10px 5px 15px;
  • Yläpuolinen reunaväli on 10px
  • Oikea reunaväli ja vasen reunaväli ovat 5px
  • Alapuolinen reunaväli on 15px

Esimerkki 3

margin:10px 5px;
  • Ylä- ja alapuoliset reunavälit ovat 10px
  • Oikea reunaväli ja vasen reunaväli ovat 5px

Esimerkki 4

margin:10px;
  • Kaikki neljä reunaväliä ovat 10px

Katso myös:

CSS-opetusohjelma:CSS ulkoreuna

HTML DOM -viittausoppikirja:margin-ominaisuus

Esimerkki

Aseta p-elementin neljä reunaväliä:

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

Kokeile itse

CSS-kieli

margin: length|auto|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
auto Selain laskee ulkoreunat.
length Määritellään ulkoreunat tietyn yksikön arvoina, kuten pikseleillä, senttimetreillä jne. Oletusarvo on 0px.
% Määritellään ulkoreunat sisällyttävän elementin leveyden prosentteina.
inherit Määritellään, että ulkoreunat tulisi periä isältä elementiltä.

Tekninen yksityiskohta

Oletusarvo: 0
Perintä: ei
Versio: CSS1
JavaScript-kieli: object.style.margin="10px 5px"

Lisää esimerkkejä

Kaikki reunaväliominaisuudet yhdessä lausekkeessa
Tämä esimerkki näyttää, miten kaikki reunaväliominaisuudet voidaan asettaa yhdessä lausekkeessa.

Selaimen tuki

Taulukossa olevat numerot antavat tiedon ensimmäisestä selaimesta, joka täysin tukee kyseistä ominaisuutta.

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