Marge CSS
Comme vous le savez, la propriété padding en CSS crée un espace autour du contenu de l'élément. Maintenant vous devez apprendre que la propriété margin en CSS crée un espace autour de l'élément.
Les valeurs de cette propriété sont définies en utilisant des longueurs ou des pourcentages et elle peut accepter aussi des valeurs négatives.
Voici les propriétés de marges en CSS:
On peut utiliser la propriété margin pour tous les côtés (haut, bas, gauche, droit) à la fois. Pour le côté haut, on utilise margin-top, pour le bas, margin-bottom, pour le gauche, margin-left et pour le droit, on utilise margin-right.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraphe avec les propriétés background-color, color et margin.</p>
</body>
</html>Maintenant expliquons.
Nous utilisons la propriété background-color pour l'arrière-plan de notre paragraphe, puis color pour la couleur de notre texte et enfin la propriété margin pour l'espace autour de l'élément. Dans cet exemple, nous avons utilisé l'élément p.
Maintenant passons à "margin: 25px 10px 15px 20px". Ce code signifie que la marge en haut doit être 25px, au côté droit 10px, en bas 15px et au gauche 20px.
On utilise cette propriété lorsqu'on donne des valeurs à tous les côtés. Il doit ressembler à cela dans le code.
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Si tous les côtés ont la même valeur, par exemple tous les côtés sont 50px, en css on peut écrire comme cela.
p {
margin: 50px;
}Lorsqu'on a les mêmes valeurs pour les côtés haut et bas (par exemple 15px) et les mêmes pour les côtés gauche et droit (par exemple 10px), on peut écrire le code suivant.
p {
margin: 15px 10px;
}Cela est le même que le suivant.
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Lorsque les valeurs pour le gauche et le droit sont les mêmes, par exemple 15px, le côté haut est 5px et le côté bas est 10px, nous allons écrire le code suivant.
p {
margin: 5px 15px 10px;
}Cela est le même que le suivant.
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Pratiquez vos connaissances
