rooster

CSS Referentie Handboek

CSS-eigenschappen

Keuzevakken

Aanbevolen cursussen:

CodeW3C.com schatkist

CSS padding-inline eigenschap

Vorige pagina padding-bottom
Volgende pagina padding-inline-end

definitie en gebruik

elementen padding-inline het verwijst naar de ruimte van de rand naar de inhoud in de lijnrichting. Het is een verkorte eigenschap van de volgende eigenschappen:

padding-inline De waarde van de eigenschap kan op verschillende manieren worden ingesteld:

Als de padding-inline-eigenschap twee waarden heeft:

padding-inline: 10px 50px;

De binnenvulling aan het begin is 10px
De binnenvulling aan het einde is 50px

Als de eigenschap padding-inline een waarde heeft:

padding-inline: 10px;

De binnenste marge aan de begin- en eindkant van het element is 10px

CSS padding-inline en padding-block eigenschappen zijn vergelijkbaar met 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 begin- en eindpositie van het element in de inline-richting, alsook padding-inline 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

Padding op beide kanten van de inline-richting instellen:

div {
  padding-inline: 50px;
}

Probeer het zelf uit

Voorbeeld 2

Wanneer de eigenschapswaarde van het <div>-element writing-mode Wanneer de eigenschapswaarde van 'writing-mode' is ingesteld op 'vertical-rl', is de inline-richting naar beneden. Het resultaat is dat de beginkant van het element van links naar boven wordt verplaatst en de eindkant van rechts naar beneden wordt verplaatst:

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

Probeer het zelf uit

Voorbeeld 3

Wanneer de eigenschapswaarde van het <div>-element direction Wanneer de eigenschapswaarde van 'direction' is ingesteld op 'rtl', is de inline-richting van rechts naar links. Het resultaat is dat de beginkant van het element van links naar rechts wordt verplaatst en de eindkant van rechts naar links wordt verplaatst:

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaard. De standaard padding-inline afstand van het element.
length	De afstand wordt gespecificeerd in eenheid zoals px, pt, cm, etc. Negatieve waarden zijn niet toegestaan. Raadpleeg:CSS Eenheden.
%	De afstand wordt gespecificeerd als een percentage van de grootte van de ouder element in de inline-richting.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erfgenomen van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritsiviteit:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.paddingInline="100px 20px"