CSS padding-inline ominaisuus

Edellinen sivu padding-bottom
Seuraava sivu padding-inline-end

Määrittely ja käyttö

Elementin padding-inline Tarkoittaa, että sen rivi- suuntaisessa ulottuvuudessa, reunasta sisältöön, on tilaa. Se on seuraavien ominaisuuksien lyhennetty muoto:

padding-inline Ominaisuuden arvo voidaan asettaa eri tavoin:

Jos padding-inline-ominaisuudella on kaksi arvoa:

padding-inline: 10px 50px;

Alkupään sisäinen marginaali on 10px
Päätepään sisäinen marginaali on 50px

Jos padding-inline-ominaisuudella on arvo:

padding-inline: 10px;

Alkupään ja loppupään sisätila on 10px

CSS padding-inline ja padding-block Ominaisuudet ovat samanlaisia CSS-ominaisuuksien kanssa padding-top,padding-bottom,padding-left ja padding-right On hyvin samanlainen, mutta padding-inline ja padding-block Ominaisuus riippuu rinnakkaisuus suunnasta ja lohko- suunnasta.

Huomioitavaa:liittyvät CSS-ominaisuudet writing-mode ja direction Määrittelee rinnakkaisuus suunnan. Tämä vaikuttaa elementin alkupään ja loppupään sijaintiin rinnakkaisuuden suunnassa, sekä padding-inline Ominaisuuden tuloksia. Englanninkielisillä sivuilla lohko- suunta on alhaalta ylös ja rinnakkaisuus suunta on vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta sisätila rinnakkaisuuden suuntaan molemmilta puolilta:

div {
  padding-inline: 50px;
}

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuuden arvo on vertical-rl, rinnakkaisuus suunta on alhaalta ylös. Tämä tarkoittaa, että elementin alkupää siirtyy ylös vasemmalle ja loppupää alas oikealle:

div {
  writing-mode: vertical-rl;
  padding-inline: 10px 100px;
}

Kokeile itse

Esimerkki 3

Kun <div>-elementin direction Kun ominaisuuden arvo on rtl, rinnakkaisuus suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin alkupää siirtyy vasemmalle ja loppupää oikealle:

div {
  direction: rtl;
  padding-inline: 10px 100px;
}

Kokeile itse

CSS syntaksi

padding-inline: auto|value|initial|inherit;

Ominaisuuden arvo

Arvo	Kuvaus
auto	Oletus. Elementin oletus padding-inline-etäisyys.
length	Määritä etäisyys px, pt, cm ym. yksiköissä. Negatiivisia arvoja ei sallita. Katso:CSS yksiköt.
%	Määritä etäisyys isäntäelementin rinnakkaisen suunnan kokonaismittana prosentteina.
initial	Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit	Periisi isäntäelementistä tämän ominaisuuden. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	auto
Perintä:	Ei
Animaatiotuotanto:	Tuki. Katso:Animaatiotutkimukseen liittyvät ominaisuudet.
Versio:	CSS3
JavaScript kieli:	object.style.paddingInline="100px 20px"