Propriété CSSModèle de boîte

padding-inline

Définit l’espace intérieur au début et à la fin d’une ligne. La version logique de padding-left et padding-right, qui comprend le sens d’écriture.

Valeur initiale: 0
Héritée: Non
Animable: oui, en tant que longueur ou pourcentage
S’applique à: tous les éléments sauf les éléments internes des tableaux (hormis les cellules)
JavaScript: element.style.paddingInline = "16px"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.search {
  position: relative;
  display: block;
}

.search .icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  translate: 0 -50%;
}

.search input {
  inline-size: 100%;
  padding-block: 10px;
  padding-inline: 40px 12px;
}

HTML de l’exemple

<style>
  .search + .search { margin-top: 10px; }
  .search input { border: 1px solid #3f3f46; border-radius: 10px; background: #18181b; color: inherit; font: inherit; }
  .search .icon { width: 14px; height: 14px; border: 2px solid #a1a1aa; border-radius: 50%; }
</style>
<label class="search">
  <span class="icon" aria-hidden="true"></span>
  <input type="text" placeholder="Rechercher dans la documentation">
</label>
<label class="search" dir="rtl">
  <span class="icon" aria-hidden="true"></span>
  <input type="text" placeholder="Rechercher dans la documentation">
</label>

Aperçu

Le second champ a dir="rtl". L’icône et l’espace qui lui est réservé se sont déplacés à droite, bien que le code CSS soit identique.

Définition et utilisation

La propriété padding-inline est un raccourci pour padding-inline-start et padding-inline-end, les marges intérieures au début et à la fin de l’axe en ligne. Dans un texte horizontal écrit de gauche à droite, ce sont la gauche et la droite, donc padding-inline: 16px donne le même résultat que 16px de padding-left et de padding-right.

L’avantage apparaît quand le sens d’écriture change. Avec dir="rtl", la ligne commence à droite, et en écriture verticale, en haut, et les espaces logiques s’y déplacent tout seuls. Le sens dépend de writing-mode et de direction sur l’élément lui-même, et ces deux propriétés sont héritées, donc il suffit généralement de les définir sur un ancêtre.

Le raccourci padding-block fait la même chose sur l’axe de bloc, c’est-à-dire en haut et en bas dans un texte normal. Ses composantes sont padding-block-start et padding-block-end. Une valeur s’applique aux deux extrémités, deux désignent le début et la fin.

Comme pour un padding classique, les valeurs ne peuvent pas être négatives. Les pourcentages se calculent par rapport à la taille en ligne du bloc englobant (sa largeur, dans un texte horizontal), même dans padding-block.

Syntaxe

padding-inline: <début> <fin>?;
padding-block: <début> <fin>?;

Valeurs

24px
<longueur>
Une seule valeur : 24px au début et à la fin de la ligne. Les rayures représentent la marge intérieure, et la zone violette la zone de contenu.
8px 48px
début fin
Le début reçoit 8px, la fin 48px. Dans un texte écrit de gauche à droite, la bande la plus large se trouve à droite.
dir="rtl"
texte de droite à gauche
La même déclaration 8px 48px dans un conteneur avec dir="rtl". La fin de la ligne se trouve maintenant à gauche, donc c’est là que va l’espace le plus large.
vertical-rl
écriture verticale
Un élément écrit verticalement a un axe en ligne qui va de haut en bas, donc padding-inline ajoute un espace en haut et en bas.
padding-block: 16px
axe de bloc
Le raccourci pour l’axe de bloc. Dans un texte horizontal, il ajoute 16px au-dessus et au-dessous du contenu.

Valeur	Type	Description
24px	<longueur>	Une seule valeur : 24px au début et à la fin de la ligne. Les rayures représentent la marge intérieure, et la zone violette la zone de contenu.
8px 48px	début fin	Le début reçoit 8px, la fin 48px. Dans un texte écrit de gauche à droite, la bande la plus large se trouve à droite.
dir="rtl"	texte de droite à gauche	La même déclaration `8px 48px` dans un conteneur avec `dir="rtl"`. La fin de la ligne se trouve maintenant à gauche, donc c’est là que va l’espace le plus large.
vertical-rl	écriture verticale	Un élément écrit verticalement a un axe en ligne qui va de haut en bas, donc `padding-inline` ajoute un espace en haut et en bas.
padding-block: 16px	axe de bloc	Le raccourci pour l’axe de bloc. Dans un texte horizontal, il ajoute 16px au-dessus et au-dessous du contenu.

Valeurs en pratique

24px

Une seule valeur : 24px au début et à la fin de la ligne. Les rayures représentent la marge intérieure, et la zone violette la zone de contenu.

.demo { padding-inline: 24px; }

8px 48px

Le début reçoit 8px, la fin 48px. Dans un texte écrit de gauche à droite, la bande la plus large se trouve à droite.

.demo { padding-inline: 8px 48px; }

dir="rtl"

La même déclaration 8px 48px dans un conteneur avec dir="rtl". La fin de la ligne se trouve maintenant à gauche, donc c’est là que va l’espace le plus large.

.demo { padding-inline: 8px 48px; }

vertical-rl

Un élément écrit verticalement a un axe en ligne qui va de haut en bas, donc padding-inline ajoute un espace en haut et en bas.

.demo { writing-mode: vertical-rl; padding-inline: 24px; }

padding-block: 16px

Le raccourci pour l’axe de bloc. Dans un texte horizontal, il ajoute 16px au-dessus et au-dessous du contenu.

.demo { padding-block: 16px; }

Compatibilité des navigateurs

Largement disponible · depuis 2021

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Les boutons paraissent proportionnés avec padding-block: 0.5em; padding-inline: 1em. Les espaces en em grandissent avec la taille de la police.
Réservez la place d’une icône au début d’un champ avec padding-inline-start, et positionnez l’icône elle-même avec inset-inline-start. Dans une mise en page de droite à gauche, les deux basculent automatiquement de l’autre côté.
Dans padding-block, un pourcentage se calcule toujours par rapport à la largeur du bloc englobant, pas à sa hauteur. Pour les proportions d’un élément, aspect-ratio est préférable.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours