Cet utilitaire définit l'espace intérieur entre le contenu d'un élément et ses bordures, permettant de créer un «coussin» autour du contenu
pour améliorer la lisibilité et la mise en page.
| Classe |
Styles |
| p-<nombre> |
padding: calc(var(--spacing) * <nombre>); |
| p-px |
padding: 1px; |
| p-(<propriete-personnalisee>) |
padding: var(<propriete-personnalisee>); |
| p-[<valeur>] |
padding: <valeur>; |
| px-<nombre> |
padding-inline: calc(var(--spacing) * <nombre>); |
| px-px |
padding-inline: 1px; |
| px-(<propriete-personnalisee>) |
padding-inline: var(<propriete-personnalisee>); |
| px-[<valeur>] |
padding-inline: <valeur>; |
| py-<nombre> |
padding-block: calc(var(--spacing) * <nombre>); |
| py-px |
padding-block: 1px; |
| py-(<propriete-personnalisee>) |
padding-block: var(<propriete-personnalisee>); |
| py-[<valeur>] |
padding-block: <valeur>; |
| ps-<nombre> |
padding-inline-start: calc(var(--spacing) * <nombre>); |
| ps-px |
padding-inline-start: 1px; |
| ps-(<propriete-personnalisee>) |
padding-inline-start: var(<propriete-personnalisee>); |
| ps-[<valeur>] |
padding-inline-start: <valeur>; |
| pe-<nombre> |
padding-inline-end: calc(var(--spacing) * <nombre>); |
| pe-px |
padding-inline-end: 1px; |
| pe-(<propriete-personnalisee>) |
padding-inline-end: var(<propriete-personnalisee>); |
| pe-[<valeur>] |
padding-inline-end: <valeur>; |
| pt-<nombre> |
padding-top: calc(var(--spacing) * <nombre>); |
| pt-px |
padding-top: 1px; |
| pt-(<propriete-personnalisee>) |
padding-top: var(<propriete-personnalisee>); |
| pt-[<valeur>] |
padding-top: <valeur>; |
| pr-<nombre> |
padding-right: calc(var(--spacing) * <nombre>); |
| pr-px |
padding-right: 1px; |
| pr-(<propriete-personnalisee>) |
padding-right: var(<propriete-personnalisee>); |
| pr-[<valeur>] |
padding-right: <valeur>; |
| pb-<nombre> |
padding-bottom: calc(var(--spacing) * <nombre>); |
| pb-px |
padding-bottom: 1px; |
| pb-(<propriete-personnalisee>) |
padding-bottom: var(<propriete-personnalisee>); |
| pb-[<valeur>] |
padding-bottom: <valeur>; |
| pl-<nombre> |
padding-left: calc(var(--spacing) * <nombre>); |
| pl-px |
padding-left: 1px; |
| pl-(<propriete-personnalisee>) |
padding-left: var(<propriete-personnalisee>); |
| pl-[<valeur>] |
padding-left: <valeur>; |
