CSS margin-inline ominaisuus

Edellinen sivu margin-bottom
Seuraava sivu margin-inline-end

Määrittely ja käyttö

margin-inline Ominaisuus määrittää rivin suuntaisen alkun ja lopun ulkoreunan, ja se on seuraavien ominaisuuksien lyhennysmuoto:

margin-inline Ominaisuuden arvoja voidaan asettaa eri tavoin:

Jos margin-inline-ominaisuudella on kaksi arvoa:

margin-inline: 10px 50px;

Aloituksen ulkoreuna on 10px
Lopun ulkoreuna on 50px

Jos margin-inline-ominaisuudella on arvo:

margin-inline: 10px;

alku- ja loppu- ulkoreunat ovat 10px

CSS:n margin-inline ja margin-block Ominaisuudet ovat samanlaisia kuin margin-top、margin-bottom、margin-left ja margin-right Ominaisuudet ovat hyvin samanlaisia, mutta margin-inline ja margin-block Ominaisuus riippuu lohko- ja rivi- suunnasta.

Huomaa:liittyvät CSS-ominaisuudet writing-mode ja direction Määrittää rivi- suunnan. Tämä vaikuttaa elementin alkuperäiseen ja lopulliseen sijaintiin sekä margin-inline-end-ominaisuuden tulokseen. Englanninkielisillä sivuilla lohko- suunta on alhaalta ylös ja rivi- suunta vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta ulkoreunat rivi- suunnassa:

div {
  margin-inline: 35px;
}

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuuden arvo on 'vertical-rl', rivi- suunta on alhaalta ylös. Tämä tarkoittaa, että elementin alkuperäinen sijainti siirtyy vasemmalta ylös ja lopullinen sijainti oikealta alas:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Kokeile itse

Esimerkki 3

Kun <div>-elementin direction Kun ominaisuuden arvo on 'rtl', rivi- suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin alkuperäinen sijainti siirtyy vasemmalta oikealle ja lopullinen sijainti oikealta vasemmalle:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Kokeile itse

CSS-kieli

margin-inline: auto|length|initial|inherit;

Ominaisuusarvo

Arvo	Kuvaus
auto	Oletusarvo. Elementin oletus margin-inline-arvo.
length	Määritä margin-inline yksiköillä px, pt, cm jne. Sallitaan negatiiviset arvot. Katso:CSS yksiköt.
%	Määritä margin-inline-prosenttiosuus suhteessa vanhempiin elementteihin.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.