CSS padding-inline-start eigenschap

Vorige pagina padding-inline-end
Volgende pagina padding-left

Definitie en gebruik

Elementen padding-inline-start De eigenschappen verwijzen naar de ruimte van de rand tot de inhoud aan de startpositie van de inline-richting.

CSS padding-inline en padding-block eigenschappen zijn vergelijkbaar met de CSS-eigenschappen padding-top,padding-bottom,padding-left en padding-right zeer vergelijkbaar, maar padding-inline en padding-block De eigenschap is afhankelijk van de inline-richting en de blokrichting.

Opmerking:gerelateerde CSS-eigenschappen writing-mode en direction Definieert de inline-richting. Dit beïnvloedt de start- en eindpositie van het element in de inline-richting, alsmede padding-inline-start Het resultaat van de eigenschap. Voor Engelse pagina's is de blokrichting naar beneden en de inline-richting van links naar rechts.

Voorbeeld

Voorbeeld 1

Stel de inbuisafstand in in de startpositie van de inline-richting:

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

Probeer het zelf uit

Voorbeeld 2

Stel de eigenschap van het <div>-element in op writing-mode Wanneer de eigenschapswaarde vertical-rl is ingesteld, is de inline-richting naar beneden. Het resultaat is dat de startpositie van het element van links naar boven verhuist:

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

Probeer het zelf uit

Voorbeeld 3

Stel de eigenschap van het <div>-element in op direction Wanneer de eigenschapswaarde rtl is ingesteld, is de inline-richting van rechts naar links. Het resultaat is dat de startpositie van het element van links naar rechts verhuist:

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

Probeer het zelf uit

CSS-syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaard. De standaard padding-inline-start-afstand van het element.
length	Specificeer een afstand in px, pt, cm, etc. Negatieve waarden zijn niet toegestaan. Raadpleeg:CSS Eenheid.
%	Specificeer een percentageafstand ten opzichte van de grootte van het ouderlijke element in de inline-richting.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript-syntaxis:	object.style.paddingInlineStart="100px"