CSS padding-inline-end ominaisuus

Edellinen sivu padding-inline
Seuraava sivu padding-inline-start

Määritelmä ja käyttö

Elementin padding-inline-end Tarkoittaa tilaa elementin reunasta sisältöön riveittäin suuntaan.

CSS padding-inline ja padding-block Ominaisuudet ovat samanlaisia kuin CSS-ominaisuuksissa padding-top,padding-bottom,padding-left ja padding-right Erittäin samanlainen, mutta padding-inline ja padding-block Ominaisuus riippuu riveittäin suunnasta ja lohko- suunnasta.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode ja direction Määrittelee riveittäin suunnan. Tämä vaikuttaa elementin alkupuolen ja loppupuolen sijaintiin riveittäin suunnassa, sekä padding-inline-end Ominaisuuden tuloksen. English pagesillä, lohko- suunta on alas, riveittäin suunta on vasemmalta oikealle.

Esimerkki

Esimerkki 1

Aseta riveittäin suuntaan päättyvän sisätilan määrä:

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

Kokeile itse

Esimerkki 2

Aseta <div>-elementin writing-mode Kun ominaisuuden arvo on vertical-rl, riveittäin suunta on alas. Tulos on, että elementin loppupuoli siirtyy oikealta alaspäin:

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

Kokeile itse

Esimerkki 3

Aseta <div>-elementin direction Kun ominaisuuden arvo on rtl, riveittäin suunta on oikealta vasemmalle. Tulos on, että elementin loppupuoli siirtyy oikealta vasemmalle:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
auto	Oletusarvo. Elementin oletus padding-inline-end -etäisyys.
length	Määritä etäisyys px, pt, cm jne. yksiköissä. Negatiivisia arvoja ei sallita. Katso:CSS yksiköt.
%	Määritä prosenttiosuus suhteessa isäntäelementtiin riveittäin suuntaan.
initial	Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	auto
Perintä:	Ei
Animaation tekeminen:	Tuki. Katso:Animaatioon liittyvät ominaisuudet.
Versio:	CSS3
JavaScript-kieli:	object.style.paddingInlineEnd="100px"