padding |
Espacement |
|---|---|
| CSS |
Syntaxe
|
padding: padding; |
|
padding: padding-vertical padding-horizontal; |
|
padding: padding-top padding-right padding-bottom padding-left; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| padding | Ce paramètre de propriété permet d'indiquer l'espacement des 4 côtés : | |
| Valeur | Description | |
| 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 hauteur et de la largeur du document. | |
| padding-vertical | Ce paramètre de propriété permet d'indiquer l'espacement du haut et du bas : | |
| Valeur | Description | |
| 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 hauteur du document. | |
| padding-horizontal | Ce paramètre de propriété permet d'indiquer l'espacement de gauche et de droite : | |
| Valeur | Description | |
| 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. | |
| padding-bottom | Ce paramètre de propriété permet d'indiquer l'espacement du bas : | |
| Valeur | Description | |
| 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 hauteur du document. | |
| padding-left | Ce paramètre de propriété permet d'indiquer l'espacement de gauche : | |
| Valeur | Description | |
| 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. | |
| padding-right | Ce paramètre de propriété permet d'indiquer l'espacement de droite : | |
| Valeur | Description | |
| 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. | |
| padding-top | Ce paramètre de propriété permet d'indiquer l'espacement de haut : | |
| Valeur | Description | |
| 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 hauteur du document. | |
Description
Cette propriété permet de définir l'espacement entre la zone attribué au paragraphe et le paragraphe lui-même.
Remarques
- Définition de l'espace interne : La propriété padding contrôle l'espace entre le contenu d'un élément et ses bordures. C'est une manière essentielle de gérer l'espacement interne pour éviter que le contenu ne touche directement les bordures. En ajustant correctement le padding, vous pouvez améliorer la lisibilité et le design général de vos éléments.
- Valeurs individuelles ou raccourcies : Vous pouvez définir le padding de chaque côté individuellement (padding-top, padding-right, padding-bottom, padding-left) ou utiliser la notation raccourcie. Par exemple, padding: 10px 20px; définit le padding vertical à 10px et horizontal à 20px. Comprendre ces syntaxes permet d'écrire un code plus concis et lisible.
- Influence sur la taille de l'élément : Par défaut, le padding augmente la taille totale de l'élément, car il est inclus dans le modèle de boîte CSS. Cependant, en définissant box-sizing: border-box;, le padding est inclus dans la largeur et la hauteur spécifiées. Cela peut simplifier la gestion de la mise en page, surtout pour les designs responsive.
- Utilisation des unités relatives : Le padding peut être défini en unités absolues (px) ou relatives (%, em, rem). Par exemple, padding: 5%; ajuste le padding proportionnellement à la largeur du conteneur parent. Les unités relatives offrent une plus grande flexibilité pour les designs adaptatifs et responsives.
- Compatibilité avec les arrière-plans : Le padding fait partie de l'espace recouvert par l'arrière-plan de l'élément. Contrairement à la marge, l'espace ajouté par le padding sera coloré ou texturé si un background-color ou un background-image est appliqué. Cela peut être utilisé pour créer des effets visuels cohérents dans vos designs.
- Différence entre padding et margin : Contrairement à margin, créant de l'espace entre les éléments, padding agit à l'intérieur de l'élément lui-même. Une confusion entre les deux peut entraîner des problèmes de mise en page, comme des chevauchements inattendus ou des espaces incohérents. Assurez-vous de bien comprendre leur rôle respectif pour une mise en page claire et bien structurée.
- Considérations pour les éléments inline : Lorsqu'un padding est appliqué à des éléments inline comme <span>, il agit horizontalement mais n'affecte pas la hauteur de la ligne. Pour que le padding influence l'espace vertical, l'élément doit être converti en inline-block ou en block. Gardez cela en tête lorsque vous travaillez avec des éléments textuels ou inline.
- Gestion des valeurs de padding nulles : Définir un padding à zéro (padding: 0;) est une pratique courante pour supprimer les espaces internes par défaut sur certains éléments (comme <body> ou <ul>). Cela est souvent utilisé dans les "reset CSS" ou les cadres d'applications pour garantir une base uniforme pour tous les navigateurs Web. Cependant, ajustez-le en fonction des besoins réels pour éviter une mise en page trop serrée ou déséquilibrée.
Dernière mise à jour : Dimanche, le 20 décembre 2015