Marges en CSS

Qu'est-ce que les marges ?

Les marges en CSS correspondent à l'espace situé immédiatement à l'extérieur d'un élément, qui peut influencer la disposition de la page. La propriété margin permet de définir la taille de cet espace.

Exemple de base de marges

Prenons le code suivant :

p {
  border: 1px solid aquamarine;
  margin: 20px;
}

Dans cet exemple, ce code crée un espace de 20 pixels autour de la boîte du paragraphe sur chaque côté. Cela signifie que d'autres éléments HTML présents sur la page ne pourront pas interférer avec la bordure du paragraphe à moins de rester à une distance de 20 pixels.

Définir des marges spécifiques

Si vous souhaitez ajuster les marges de manière précise pour chaque côté d'un élément, il existe des propriétés spécifiques que vous pouvez utiliser :

• margin-top : définit la marge supérieure.
• margin-bottom : détermine la marge inférieure.
• margin-left : gère la marge à gauche.
• margin-right : contrôle la marge à droite.

Vous pouvez également utiliser la propriété raccourcie margin, qui combine toutes ces valeurs.

Conclusion

Les marges en CSS sont essentielles pour structurer votre mise en page de manière esthétique et fonctionnelle. En maîtrisant les marges, vous pourrez contrôler l'espacement entre vos éléments HTML de manière précise.