margin
La propriété margin permet de définir l'espace compris entre les bords extérieurs de l'élément et les bords inrérieurs de son élément parent. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom et margin-left.Cette propriété n'a aucun sens si elle est appliquée à la balise <body>.
La propriété margin peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une longueur ou un pourcentage ou bien le mot-clé auto.
- Une valeur : La marge s'appliquera de la même façon sur les quatre côtés de l'élément.
- Deux valeurs : La première valeur définit les marges du haut et du bas de l'élément. La deuxième valeur définit les marges de gauche et droite.
- Trois valeurs : La première valeur correspond au bord du haut de l'élément, la deuxième valeur définit les marges de gauche et de droite et la troisième valeur correspond à la marge du bas.
- Quatre valeurs : Chaque valeur définit respectivement les bords du haut, de droite, du bas et de gauche de l'élément.
Avec l'arrivée de HTML5, la balise <center> qui, comme son nom l'indique, permettait de centrer horizontalement un élément, est devenue obsolète. C'est la propriété margin qui vient à notre aide avec la valeur auto qui comble ce vide.
<style>
.fond {
width: 480px;
height: 360px;
border: 1px dashed black;
}
.rect {
width: 240px;
height: 180px;
background-color: greenyellow;
margin: 40px auto;
}
</style>
<div class="fond">
<div class="rect"></div>
</div>