La propriété CSS margin permet de définir les propriétés des quatre marges extérieures d’un élément en une seule fois.
p{
margin: 20px 20px 20px 20px;
}
Les valeurs renseignés sont de type numérique en %, pt, px ou em.
-
Il y a plusieurs possibilités :
- S’il y a une valeur celle-ci est appliquée à quatre marges intérieures.
- S’il y a deux valeurs la première est appliquée aux marges intérieures hautes et basses et la deuxième aux marges intérieures droites et gauches.
- S’il y a quatre valeurs la première est appliquée à une marge intérieure à la fois dans le sens des aiguilles d’une montre en partant de la marge intérieure haute.
Exemple :
CSS
#contour{
border:1px solid green;
}
p{
border: 1px solid red;
margin: 20px 20px 20px 20px;
}
HTML
<div id ="contour"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</p></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.