Propriété margin

La propriété margin permet de définir les marges extérieures (haut, droite, basse, gauche) d'un élément.

- margin-top = marge haute
- margin-right = marge droite
- margin-bottom = marge basse
- margin-left = marge gauche
Les valeurs des marges sont des valeurs numériques suivies de px ou % ou pt ou em.
Prenons l'exemple de 2 carrés dont un de 200px (orange) de coté et l'autre de 80px (noir) de coté auquelle nous allons définir une marge de 50 pixel à chaque fois.

margin-top

margin-top à pour valeur 50px donc la propriété css sera margin-top: 50px;, ce qui a pour effet de laisser une marge de 50 pixel entre le bord haut du carré noir et le bord haut du carré orange.
Exemple:

margin-top
/*carré orange*/
.margin-top{
border: 1px solid #000000;
background: #ECCF3E;
width: 200px;
height: 200px;
}
/*carré noir*/
.margin-top1{
width: 80px;
height: 80px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin-top: 50px;
}

margin-right

margin-right à toujours pour valeur dans cette exemple 50px donc la propriété css sera margin-right: 50px; et margin-left: 70px;, ce qui aura pour effet de laisser une marge de 50 pixel entre le bord droit du carré noir et le bord droit du carré orange.

Explication:
Le carré orange fait 200px de coté.
Le carré noir fait 80px de coté.
Pour obtenir une marge à droite de 50px il faut aussi indiquer la marge de gauche. Pour obtenir la marge de gauche on additionne un des cotés du carré noir (80px) + la marge droite (50px) soit un total de 130px qu'on soustrait ensuite du carré orange, soit 200px-130px=70px.

margin-right
.margin-right{
border: 1px solid #000000;
background: #ECCF3E;
width: 200px;
height: 200px;
}
.margin-right1{
width: 80px;
height: 80px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin-right: 50px;
margin-left: 70px;
}

Note:
La propriété margin peut aussi s'écrire de cette façon: margin: 0 50px 0 70px;
L'ordre des chiffres est toujours haut, droite, bas, gauche donc:
haut = 0
droite = 50px
bas = 0
gauche = 70px

margin-bottom

margin-bottom à toujours pour valeur 50px, donc la propriété css sera margin-bottom: 50px; et margin-top: 70px;, ce qui aura pour effet de laisser une marge de 50 pixel entre le bord bas du carré noir et le bord bas du carré orange.
L'explication est quasi la même que pour la propriété margin-right

margin-bottom
.margin-bottom {
border: 1px solid #000000;
background: #ECCF3E;
width: 200px;
height: 200px;
}
.margin-bottom1 {
width: 80px;
height: 80px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin-top: 70px;
margin-bottom : 50px;
}

margin-left

margin-left à toujours pour valeur 50px donc la propriété css sera margin-left: 50px;, ce qui aura pour effet de laisser une marge de 50 pixel entre le bord gauche du carré noir et le bord gauche du carré orange.

margin-left
.margin-left{
border: 1px solid #000000;
background: #ECCF3E;
width: 200px;
height: 200px;
}
.margin-left1{
width: 80px;
height: 80px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin-left: 50px;
}
Voir/déposer un commentaire (0) | Signaler un problème