padding-left |
Espacement de gauche |
| CSS |
|
Syntaxe
padding-left: paramètres;
|
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer l'espacement de gauche : |
| distance |
Cet attribut permet d'indiquer que l'espacement calculé en pixels. La valeur par défaut est 0. |
| pourcentage% |
Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la largeur du document. |
Description
Cette propriété permet de définir l'espacement à la gauche entre la zone attribué au paragraphe et le paragraphe lui-même.
Remarques
- Définition et rôle : La propriété padding-left permet de spécifier l'espace intérieur entre le bord gauche du contenu d'un élément et sa bordure gauche.
Cet espace est situé à l'intérieur de la boîte de l'élément, ce qui signifie qu'il n'affecte pas la position des éléments voisins.
- Unités disponibles : Les valeurs de padding-left peuvent être définies avec des unités absolues (par exemple px, cm) ou relatives (comme %, em, rem, ou vw).
Les unités relatives permettent de rendre le design plus flexible et adaptable à différents écrans.
- Interaction avec box-sizing : Si la propriété box-sizing est définie sur content-box (valeur par défaut), padding-left est ajouté à la
largeur totale de l'élément. Si box-sizing: border-box, le padding est inclus dans la largeur totale et n'augmente pas la taille réelle de l'élément.
- Comportement avec les éléments en ligne (inline) : Pour les éléments en ligne, comme un span, l'application de padding-left crée un espacement visible,
mais uniquement entre le contenu et le bord gauche. Cependant, cela n'affecte pas l'espacement vertical ni la hauteur de l'élément.
- Valeur par défaut : Par défaut, si aucune valeur n'est définie, padding-left est égal à 0. Cela signifie qu'aucun espace n'est ajouté entre le contenu et la
bordure gauche, sauf si un style explicite est appliqué.
- Impact sur les listes : Dans les listes (ul, ol), padding-left est
souvent utilisé pour ajuster l'espacement des puces ou des numéros par rapport au contenu. Par défaut, les navigateurs appliquent généralement un padding-left aux listes,
ce qui peut nécessiter des ajustements pour un alignement personnalisé.
- Interaction avec les propriétés directionnelles : Dans les environnements avec des langues de droite à gauche (RTL), comme l'arabe ou l'hébreu, la
propriété padding-left est souvent remplacée par padding-right, sauf si elle est explicitement spécifiée. Pour gérer cela, il est
préférable d'utiliser des propriétés logiques comme padding-inline-start.
- Héritage et globalité : La propriété padding-left n'est pas héritée par défaut. Cependant, elle peut être appliquée globalement à plusieurs éléments en
utilisant des sélecteurs CSS globaux, comme * ou des classes communes. Cela permet de garantir une cohérence visuelle dans la mise en page.
Dernière mise à jour : Dimanche, le 20 décembre 2015
