Espacement intérieur

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 34 sur 76.

En CSS, le remplissage est l’espace entre le contenu d’un élément et sa bordure. Le remplissage sert à créer un espace visuel autour du contenu, ce qui le rend plus lisible et visuellement plus attrayant. Vous pouvez contrôler le remplissage sur les quatre côtés d’un élément (haut, droite, bas et gauche) indépendamment ou à l’aide de la 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 le remplissage des quatre côtés en une seule fois, par exemple :

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

div {
    padding: 10px 25px; /* Définit le padding haut et bas à 10px, et le padding gauche et droit à 25px */
}

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

Dans cet exemple, tous les éléments <p> (paragraphes) ont une marge intérieure de 20px sur tous les côtés, tous les éléments <div> ont une marge intérieure supérieure et inférieure de 10px et une marge intérieure gauche et droite de 25px, et tous les éléments ayant la classe button ont une marge intérieure supérieure de 15px, une marge intérieure droite de 30px, une marge intérieure inférieure de 10px et une marge intérieure 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.

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>