Paramètre de propriété CSS Padding
Le paramètre de propriété CSS Padding est parfois déroutant, car il peut accepter 1 valeur, 2 valeurs, 3 ou 4 valeurs ensemble.
Par exemple, tous les paramètres de propriété de remplissage ci-dessous sont valides.
padding: 10px; padding: 10px 8px; padding: 10px 8px 10px; padding: 10px 8px 10px 9px;
Règle de remplissage CSS.
1) L'ordre de remplissage CSS est suivi dans le sens des aiguilles d'une montre, comme suit
padding: top right bottom left
2) Les valeurs non déclarées sont prises du côté opposé
Exemple de remplissage CSS
1) rembourrage: 10px 8px 10px 9px;
Les 4 valeurs sont faciles à comprendre.
Le résultat est 10px en haut, 8px à droite, 10px en bas et 9px à gauche
2) rembourrage: 10px 8px;
Les 2 valeurs sont également claires. Ici, nous déclarons 10px en haut et 8px à droite. Suivez la règle de remplissage -The undeclared values are taken from the opposing side, la valeur «Top» sera affectée à «Bottom» et la valeur «Right» affectera également «Left».
Le résultat est 10px en haut, 8px à droite, 10px en bas et 8px à gauche
3) rembourrage: 10px 8px 10px;
C'est le paramètre le plus déroutant. Ici, nous déclarons 10px en haut, 8px à droite et 10px en bas, suivez la règle de remplissage -The undeclared values are taken from the opposing side, la valeur «Droite» affectera à «Gauche».
Le résultat est 10px en haut, 8px à droite, 10px en bas et 8px à gauche
4) rembourrage: 10px;
Ce paramètre de propriété est un peu spécial, le paramètre s'appliquera à toutes les valeurs en haut, à droite, en bas et à gauche.
Le résultat est 10px en haut, 10px à droite, 10px en bas et 10px à gauche
Conclusion
En fait, la façon alternative de faire ce paramètre de propriété de remplissage CSS d'une ligne est d'utiliser
1) padding-top:
2) padding-right:
3) padding-bottom:
4) padding-left:
Par exemple,
padding: 10px 8px 10px 9px;
est équivalent à
padding-top:10px; padding-right:8px; padding-bottom:10px; padding-left:9px;
Je préfère davantage les paramètres de propriété de remplissage CSS multi-lignes comme padding-top ou padding-right, le code est propre et facile à maintenir. Pourquoi tant de développeurs Web veulent-ils compliquer les choses? La propriété de remplissage d'une ligne la rendra-t-elle plus professionnelle?