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

Comprendre les padding en CSS

Défintion

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 :

Vous avez 2 possibilités :

  1.  Espace en pixels (exemple 10px)
  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. haut
  2. droite
  3. bas
  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 >>>

Le CSS en 3 questions/réponses – en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML

🤔 Qu'est-ce que le CSS ?

CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.