Gérer les marges avec CSS3

à quoi sert de créer des marges en CSS? Lorsque vous avez des blogs, vous souhaitez créer des espacement, grâce aux marges CSS, vous allez pouvoir cibler un bloc et lui donner des marges externes avec margin

Synthase des marges avec margin :

margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;

ou en 1 code on peut utiliser margin avec un le mot clé margin et lui donner 4 valeurs :

margin: 0 0 0 0;

Dans cet ordre là :

  • haut
  • droite
  • bas
  • gauche

Information supplémentaires :

  • On peut gérer les margins en %, en pixels , en rem

Exemple avec un margin à 4 valeurs

margin: 10px 5px 15px 10px;
  • la marge du haut sera de 10 pixels
  • la marge de droite sera de 5 pixels
  • la marge du bas sera de 15 pixels
  • la marge de gauche sera de 10 pixels

Exemple avec margin-top, margin-right, margin-bottom, margin-left

margin-left:10px
margin-top:30px;
margin-right:30px;
margin-bottom:10px;

Astuces

Si je renseignes 2 valeurs :

margin : 20px 10px
  • La marge du bas sera comme celle du haut à 20 px
  • La marge de gauche sera comme la mage de droite à 10px;

Sur certains navigateurs la bordure pour être un peu variable pour corriger ce problème mettez votre margin à 0 comme ceci :

margin: 0;

Nos autres cours