Marges

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

En CSS, margin est l'espace autour d'un élément, à l'extérieur de toute bordure définie. C'est une autre partie essentielle du modèle de boîte. Les marges sont utilisées pour créer de l'espace entre les éléments, en les séparant les uns des autres.

Vous pouvez contrôler la marge sur les quatre côtés d'un élément (haut, droite, bas et gauche) indépendamment ou en utilisant la notation abrégée.

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

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

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

margin-left: La marge sur le côté gauche de l'élément.
value: La valeur de marge 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 des quatre côtés à la fois, par exemple :

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

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

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

Dans cet exemple, tous les éléments <p> ont une marge de 20px de tous les côtés, tous les éléments <div> ont une marge supérieure et inférieure de 10px et une marge gauche et droite de 25px, et tous les éléments avec la classe button ont une marge supérieure de 15px, une marge droite de 30px, une marge inférieure de 10px et une marge gauche de 5px.

Défi

Facile

On vous donne un document HTML avec un titre (<h1>) et une division (<div>). Votre tâche consiste à utiliser la propriété margin pour ajouter de l'espace autour de ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez la margin à 20px de tous les côtés.
Écrivez une règle CSS qui cible l'élément <div>. Définissez la margin supérieure et inférieure à 10px et la margin gauche et droite à 30px.

Aide-mémoire

La propriété margin crée de l'espace autour d'un élément, à l'extérieur de toute bordure. Vous pouvez contrôler la marge sur les quatre côtés indépendamment ou utiliser la notation abrégée.

Propriétés de marge individuelles :

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

Notation abrégée :

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

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

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

Essayez vous-même

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>