Marges intérieures

En CSS, les marges intérieures (padding, en anglais), sont utilisées afin de définir les marges intérieures dont un élément HTML peut bénéficier.

Pour ce faire, le CSS utilise la propriété padding. Cela permet un contrôle total sur les marges intérieures.

Ce cours détaillera chacune des propriétés padding permettant de définir les marges intérieures de chaque côté d’un élément. De plus, ce cours inclut une explication détaillée de la propriété raccourcie.

Définir les marges intérieures de chaque côté individuellement

Le CSS utilise une propriété spécifique pour chaque côté d’un élément dont il faut définir les marges intérieures :

• padding-top : marge intérieure supérieure
• padding-right : marge intérieure droite
• padding-bottom : marge intérieure inférieure
• padding-left : marge intérieure gauche

Chacune de ces propriétés peut recevoir la valeur suivante :

• taille : une taille de marge intérieure en px, cm, em, pt
• % : définit une taille de marge intérieure en % de la largeur de l’élément contenant
• inherit : indique que les marges intérieures doivent être héritées de l’élément parent

Remarque : Les valeurs négatives ne sont pas prises en compte.

Exemple :

h1 {
    padding-top : 50px; /* marge intérieure supérieure de 50 pixels */
    padding-right : 30px; /* marge intérieure droite de 30 pixels */
    padding-bottom : 50px; /* marge intérieure inférieure de 50 pixels */
    padding-left : 30px; /* marge intérieure gauche de 30 pixels */
}

p {
    padding-top : 3%; /* marge intérieure supérieure de 3 pourcent */
    padding-left : 5%;
    padding-bottom : 3%;
    padding-right : 5%;
}

p.idee
{
    padding-left : inherit; /* Ici, la marge intérieure gauche du paragraphe de classe idee aura une valeur de 5% si l'élément parent est une balise <p> */
}

Propriété raccourcie

Afin de raccourcir le code, le langage CSS permet l’utilisation de la propriété raccourcie padding, permettant de rassembler les 4 propriétés évoquées dans le point précédent en une seule.

4 valeurs