Notion de padding CSS ou espacement entre bloc
Comment fonctionne les padding CSS

Comprendre les padding en CSS

Défintion

Exemple de Padding et marge css Le "Padding", c'est la distance entre le bord d'un élément HTML et son contenu
Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage CSS sur ce lien)

Syntaxe CSS

Voici comment ce construit une notion de padding en CSS :
padding-top: espace en pixels ou pourcentage;
padding-left: espace en pixels ou pourcentage;
padding-right: espace en pixels ou pourcentage;
padding-bottom: espace en pixels ou pourcentage;

Gestion de la valeur du padding :

Exemple de Padding css Vous avez 2 possibilités :
  1. 1 Espace en pixels (exemple 10px)
  2. 2 Pourcentage (70%)
Vous pouvez aussi déclarer vos marges comme cela :padding: 10px 10px 10px 10px;

Les valeurs définissent l'espace entre les éléments HTML dans cet ordre :
  1. 1 haut
  2. 2 droite
  3. 3 bas
  4. 4 gauche
A savoir : Si ne renseignez qu'une valeur, elle sera prise par défaut pour les autres espaces entre les éléments HTML : padding: 10px;
Si vous renseignez deux ou trois valeurs, elles seront la références pour les cotés opposés :
padding: 10px 10px; /* 2 valeurs */
padding: 10px 10px 10px; /* 3 valeurs */
Vous pouvez définir des marges à zéro. Si vous ne définissez pas les marges, elles prenent 0 comme valeur par défaut : padding: -10px;
Attention : : Il ne faut pas mettre "px" si la valeur est zéro (Voir exemple ci-dessus)
Exemple concert ? L'exemple ci-dessous défini une marge de 20px à la balise "container"
#container{
  margin: 20px;
  background: #eeeeee;
  padding: 30px;
  font-size: small;
  font-family: "Tahoma", Arial, sans-serif;
  text-align: left;
}
Mettre en formes du contenu type texte >>>

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page https://www.cssdebutant.com/coder-en-css-les-padding-en-css.html Votes: 4.4 / 5 étoiles - 21 vote(s) et 10 commentaires