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 :

- 1 Espace en pixels (exemple 10px)
- 2 Pourcentage (70%)
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
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.Voulez-vous laisser une note ou un commentaire ?
Donnez votre avis sur ce contenu :
Votes:
4.4 (96%)
40 votes