CSS padding-inline-start ominaisuus

Edellinen sivu padding-inline-end
Seuraava sivu padding-left

Määritelmä ja käyttö

Elementin padding-inline-start Ominaisuudet viittaavat tilaan, joka on rinnakkaisessa suunnassa alkupäästä reunasta sisältöön.

CSS padding-inline ja padding-block Ominaisuudet ovat samanlaisia CSS-ominaisuuksien kanssa padding-top,padding-bottom,padding-left ja padding-right Ominaisuudet ovat erittäin samanlaisia, mutta padding-inline ja padding-block Ominaisuus riippuu rinnakkaisuuden ja lohko- suunnan suhteesta.

Huomaa:liittyvät CSS-ominaisuudet writing-mode ja direction Määrittelee rinnakkaisuuden suunnan. Tämä vaikuttaa elementin alkupään ja loppupään sijaintiin rinnakkaisessa suunnassa, sekä padding-inline-start Ominaisuuden arvon tuloksena. English pagesillä lohko- suunta on alaspäin, rinnakkaisuus suunta on vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta sisätila rinnakkaisessa suunnassa alkupäässä:

div {
  padding-inline-start: 50px;
}

Kokeile itse

Esimerkki 2

Aseta <div>-elementin writing-mode Kun ominaisuuden arvo on vertical-rl, rinnakkaisuus suunta on alaspäin. Tämä tarkoittaa, että elementin alkupää siirtyy vasemmalta ylös:

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

Kokeile itse

Esimerkki 3

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

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
auto	Oletus. Elementin oletus padding-inline-start -etäisyys.
length	Määritä etäisyys px, pt, cm ym. yksiköissä. Negatiivisia arvoja ei sallita. Katso:CSS yksiköt.
%	Määritä suhteellinen etäisyys prosentteina vanhemman elementin rinnakkaisessa suhteessa.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	auto
Perintä:	Ei
Animaatioiden luominen:	Tuki. Katso:Animaatiot ja -ominaisuudet.
Versio:	CSS3
JavaScript-kieli:	object.style.paddingInlineStart="100px"