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


A découvrir massage-zen.shop : LE site 100% bien être pour trouver des accessoire de massage à petits prix :)

Comprendre les padding en CSS

Défintion

Exemple de Padding et marge css Le "Padding" en CSS, 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.5 / 5 étoiles - 34 vote(s) et 10 commentaires