Propriété padding-inline-end de CSS

Page précédente padding-inline
Page suivante padding-inline-start

Définition et utilisation

Élément padding-inline-end Se réfère à l'espace entre la bordure de l'élément et le contenu à la fin de la direction inline.

CSS padding-inline et padding-block Les attributs sont similaires à l'attribut padding-top,padding-bottom,padding-left et padding-right Très similaire, mais padding-inline et padding-block L'attribut dépend de la direction inline et de la direction de bloc.

Attention :les attributs CSS associés writing-mode et direction Définit la direction inline. Cela affecte la position de début et de fin de l'élément dans la direction inline, ainsi que padding-inline-end Le résultat de l'attribut. Pour les pages en anglais, la direction de bloc est vers le bas, et la direction inline est de gauche à droite.

Exemple

Exemple 1

Définir l'espace intérieur à la fin de la direction inline :

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

Essayez-le vous-même

Exemple 2

Définir la valeur de l'attribut <div> writing-mode Lorsque la valeur de l'attribut est définie sur vertical-rl, la direction inline est vers le bas. Le résultat est que la position de fin de l'élément se déplace du côté droit vers le bas :

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

Essayez-le vous-même

Exemple 3

Définir la valeur de l'attribut <div> direction Lorsque la valeur de l'attribut est définie sur rtl, la direction inline est de droite à gauche. Le résultat est que la position de fin de l'élément se déplace de la droite vers la gauche :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. La distance par défaut de padding-inline-end de l'élément.
length	Définit une distance en px, pt, cm, etc. Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
%	Définit une distance en pourcentage par rapport à la taille de l'élément parent dans la direction inline.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation des animations :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.paddingInlineEnd="100px"