Attribut padding-inline CSS

Page précédente padding-bottom
Page suivante padding-inline-end

Définition et utilisation

L'élément padding-inline Il s'agit de l'espace entre la bordure et le contenu dans la direction inline. C'est une abréviation des attributs suivants :

padding-inline La valeur de l'attribut peut être définie de différentes manières :

Si l'attribut padding-inline a deux valeurs :

padding-inline: 10px 50px;

La marge interne du bout de départ est de 10px
La marge interne du bout de fin est de 50px

Si l'attribut padding-inline a une valeur :

padding-inline: 10px;

Les marges internes de début et de fin sont toutes de 10px

CSS padding-inline et padding-block Les attributs sont similaires à 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.

Remarque :les propriétés CSS associées 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 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 la marge interne des deux côtés de la direction inline :

div {
  padding-inline: 50px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'attribut writing-mode Lorsque la valeur de l'attribut est vertical-rl, la direction inline est vers le bas. Le résultat est que le début de l'élément est déplacé vers le haut et la fin vers le bas :

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

Essayez-le vous-même

Exemple 3

Lorsque l'attribut direction Lorsque la valeur de l'attribut est rtl, la direction inline est de droite à gauche. Le résultat est que le début de l'élément est déplacé vers la droite et la fin vers la gauche :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Par défaut. La distance padding-inline par défaut de l'élément.
length	Spécifier la distance en px, pt, cm, etc. Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
%	Spécifier la distance en pourcentage de la taille de ligne inline de l'élément parent.
initial	Régler cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. 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.paddingInline="100px 20px"