Padding

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 34 sur 76.

En CSS, le padding est l'espace entre le contenu d'un élément et sa bordure. Le padding est utilisé pour créer un espace de respiration visuel autour du contenu, le rendant plus lisible et plus attrayant visuellement. Vous pouvez contrôler le padding sur les quatre côtés d'un élément (haut, droite, bas et gauche) indépendamment ou en utilisant une notation abrégée.

Voici la syntaxe de base pour utiliser la propriété padding :

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: La marge intérieure sur le côté supérieur de l'élément.
padding-right: La marge intérieure sur le côté droit de l'élément.
padding-bottom: La marge intérieure sur le côté inférieur de l'élément.

padding-left: La marge intérieure sur le côté gauche de l'élément.
value: La valeur de marge intérieure souhaitée, qui peut être spécifiée en pixels (px), ems (em), pourcentages (%), ou d'autres unités CSS valides.

Vous pouvez également utiliser la notation abrégée pour définir la marge intérieure (padding) des quatre côtés à la fois, par exemple :

p {
    padding: 20px; /* Applique la même marge intérieure aux quatre côtés */
}

div {
    padding: 10px 25px; /* Définit la marge intérieure supérieure et inférieure à 10px, et la marge intérieure gauche et droite à 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Définit la marge intérieure pour chaque côté individuellement */
}

Dans cet exemple, tous les éléments <p> (paragraphe) ont un padding de 20px sur tous les côtés, tous les éléments <div> ont un padding supérieur et inférieur de 10px et un padding gauche et droit de 25px, et tous les éléments avec la classe button ont un padding supérieur de 15px, un padding droit de 30px, un padding inférieur de 10px et un padding gauche de 5px.

Défi

Facile

On vous donne un document HTML avec deux titres. Votre tâche consiste à utiliser la propriété padding pour ajouter de l'espacement autour du contenu de ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez le padding à 20px de tous les côtés.
Écrivez une règle CSS qui cible l'élément <h2>. Définissez le padding haut et bas à 10px et le padding gauche et droit à 30px.

Aide-mémoire

Le padding CSS crée de l'espace entre le contenu d'un élément et sa bordure.

Propriétés de padding individuelles :

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

Notation raccourcie :

/* Même padding sur tous les côtés */
padding: 20px;

/* Haut/bas : 10px, Gauche/droite : 25px */
padding: 10px 25px;

/* Haut, Droite, Bas, Gauche individuellement */
padding: 15px 30px 10px 5px;

Les valeurs peuvent être spécifiées en pixels (px), ems (em), pourcentages (%), ou d'autres unités CSS valides.

Essayez vous-même

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>