Propriétés margin CSS

Les propriétés de margin CSS vous permettent de définir l'espacement autour de la bordure de la boîte d'un élément (ou le bord de la boîte de l'élément, s'il n'a pas de bordure définie).

La marge d'un élément n'est pas affectée par son background-color, elle est toujours transparente. Cependant, si l'élément parent a la couleur d'arrière-plan, il sera visible à travers sa zone de marge.

Définition des marges pour les côtés individuels

Vous pouvez spécifier les marges des côtés individuels d'un élément, tels que les côtés supérieur, droit, inférieur et gauche, à l'aide des propriétés CSS margin-top, margin-right, margin-bottom et margin-left, respectivement. Essayons l'exemple suivant pour comprendre comment cela fonctionne :

h1 {

    margin-top: 50px;

    margin-bottom: 100px;

}
p {
    margin-left: 75px;

    margin-right: 75px;

}

Les propriétés de margin peuvent être spécifiées à l'aide des valeurs suivantes :

• lenght - spécifie une marge en px, em, rem, pt, cm, etc.
• % - spécifie une marge en pourcentage (%) de la largeur de l'élément conteneur.
• auto - le navigateur calcule une marge appropriée à utiliser.
• inherit - spécifie que la marge doit être héritée de l'élément parent.

Vous pouvez également spécifier des marges négatives sur un élément, par exemple, margin: -10px;, margin: -5%;, etc.

La propriété abrégée de margin

La propriété margin est une propriété abrégée pour éviter de définir la marge de chaque côté séparément, c'est-à-dire margin-top, margin-right, margin-bottomet margin-left.

Examinons l'exemple suivant pour comprendre comment cela fonctionne :

h1 {

    margin: 50px; /* apply to all four sides */

}
p {

    margin: 25px 75px; /* vertical | horizontal */

}
div {

    margin: 25px 50px 75px; /* top | horizontal | bottom */

}
hr {

    margin: 25px 50px 75px 100px; /* top | right | bottom | left */

}

Cette notation abrégée peut prendre une, deux, trois ou quatre valeurs séparées par des espaces.

• Si une valeur est spécifiée, elle est appliquée aux quatre côtés.
• Si deux valeurs sont spécifiées, la première valeur est appliquée aux côtés supérieur et inférieur , et la seconde valeur est appliquée aux côtés droit et gauche de la boîte de l'élément.
• Si trois valeurs sont spécifiées, la première valeur est appliquée à top , la deuxième valeur est appliquée à right et left, et la dernière valeur est appliquée à bottom .
• Si quatre valeurs sont spécifiées, elles sont appliquées aux côtés supérieur , droit , inférieur et gauche de la boîte de l'élément respectivement dans l'ordre spécifié.

Il est recommandé d'utiliser les propriétés raccourcies, cela vous aidera à gagner du temps en évitant la saisie supplémentaire et rendra votre code CSS plus facile à suivre et à maintenir.

Centrage horizontal avec marges automatiques

La valeur auto de la propriété margin indique au navigateur Web de calculer automatiquement la marge. Ceci est couramment utilisé pour centrer un élément horizontalement dans un conteneur plus grand.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

div {

    width: 300px;

    background: gray;

    margin: 0 auto;

}

Les règles de style ci-dessus permettent à l'élément <div> d'occuper 300 pixels de tout l'espace horizontal disponible, et l'espace restant sera également divisé entre les marges gauche et droite.