Comprendre le padding en CSS
Rédigé par O. Clotaire
Aucun commentaire
En cherchant à positionner une image d'accroche à gauche du chapô de PluXml, j'ai trouvé la configuration qu'il me fallait sur Pluxopolis, et là j'ai voulu comprendre comment positionner le padding dans le code CSS fournit. Dans le CMS PluXml, depuis la version 5.5 il est possible d'y insérer une image d'accroche à gauche ou à droite du chapô en modifiant le fichier du thème themes/defaut/css/theme.css.
1- Image d'accroche :
Commencer par commenter le code de l'image "standard" :
/* Image d'accroche d'origine */
/*
.article img.art_thumbnail {
padding: 15px 0 10px 0;
}
*/
Copier coller le code de l'image d'accroche à gauche :
/* image d'accroche à gauche du chapo */
.article img.art_thumbnail {
display: inline-block;
float: left;
padding: 5px 10px 10px 0;
}
2- Padding :
Le padding est donc une déclaration de vos marges entre les éléments HTML :
padding: 5px 10px 10px 0;
Les valeurs correspondent à cet ordre :
Haut, droite, bas, gauche
Padding avec 3 valeurs (padding: 5px 10px 10px) ou avec 2 valeurs (padding: 5px 10px) :
Même référence pour le coté opposé.
Padding avec 1 valeur (padding: 5px) :
Par défaut pour les autres marges.
Un padding avec valeur définit à zéro correspond à padding: -10px
Remarques :
Si une des valeur est à zéro, ne pas mettre "px"
