Accueil    CSS    Propriété margin
 



style css margin  Style CSS margin

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété margin décrit l'espace entre le bord de l'élément et les éléments parent ou adjacents. Il est possible de définir ces marges de façon globale pour les quatre côtés ou de façon spécifique en spécifiant chacune d'elle :
   - margin-top
   - margin-left
   - margin-right
   - margin-bottom

La déclaration suivante "margin:5px 10px 15px 20px;" permet d'initialiser la marge autour des quatre bordures en une fois. Dans cet exemple on a en détail :
   - margin-top:5px;
   - margin-right:10px;
   - margin-bottom:15px;
   - margin-left:20px;

L'article relatif au modèle des boites permet de bien comprendre les différentes dispositions s'appliquant autour d'un élément.



Propriétés pour le style margin :




Propriété Définition Valeurs CSS
margin Détermine l'espace entre les bords de l'élément et les éléments adjacents auto
valeur
%
inherit
CSS 1
margin-top Détermine l'espace entre le bord haut de l'élément et les éléments adjacents auto
valeur
%
inherit
CSS 1
margin-bottom Détermine l'espace entre le bord bas de l'élément et les éléments adjacents auto
valeur
%
inherit
CSS 1
margin-left Détermine l'espace entre le bord gauche de l'élément et les éléments adjacents auto
valeur
%
inherit
CSS 1
margin-right Détermine l'espace entre le bord droit de l'élément et les éléments adjacents auto
valeur
%
inherit
CSS 1


Exemple d'utilisation du style css margin :





Utilisation de la propriété margin avec des éléments <span>

<span style="border:solid 1px black; padding:5px; margin-right:20px;">
   Element 1
</span>
<span style="border:solid 1px black; padding:5px; margin-left:20px;
   margin-right:20px;">
   Element 2
</span>
<span style="border:solid 1px black; padding:5px; margin-left:20px;">
   Element 3
</span>

Application de la propriété margin autour d'un paragraphe :

<div style="border:solid 1px black; width:450px;">
   <p style="margin:20px; border:dotted 1px silver;">
      Texte du paragraphe avec une marge de 20 pixels
   </p>
</div>


Application de la propriété margin autour d'éléments <span> :


Element 1 Element 2 Element 3


Application de la propriété margin autour d'un paragraphe :

Texte du paragraphe avec une marge de 20 pixels