Comprendre le padding en CSS

Rédigé par O. Clotaire Aucun commentaire Fil RSS des articles
Classé dans : PluXml, Web Mots clés : CSS, PluXml, padding, Web, blog

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"



A PROPOS

  • Grace à mon expérience dans les Systèmes d'Information, j'ai le privilège de partager mon expérience en les centralisant sous la forme d’une base de connaissance.
  • Parfois certaines de nos questions ne trouvent pas toujours de réponse. Le domaine de l’informatique évolue rapidement, il est alors important de pouvoir profiter des solutions déjà expérimentés.
  • Ce site sera de plus en plus accessible.
  • Je vous remercie d’avance pour vos éventuelles remarques constructives permettant son amélioration.

Écrire un commentaire

 Se rappeler de moi sur ce site
Quelle est la première lettre du mot lijz ?

Fil RSS des commentaires de cet article

↓