CSS : les propriétés Margin et padding

1 – La propriété  margin

Margin represente la marge externe d’un élément, elle est doté des propriétés :

-margin-right       :  définit la marge à droite
-margin-left          :  définit la marge à gauche
-margin-top          :  définit la marge en haut
-margin-bottom :  définit la marge en bas

Exemple :

Voici un exemple qui détérmine une marge de 150 pixel de touts les cotés :

p {margin-top: 150px ;margin-right: 150px ;margin-bottom : 150px ;margin-left : 150px ;}

2 – La propriété  padding

Contrairement à la propriété margin, la propriété padding définit la marge interne à élément ,  la syntaxe de cette dernière est similaire à la première  :

-padding-right         :    définit la marge à droite
-padding-left            :    définit la marge à gauche
-padding-top            :    définit la marge en haut
-padding-bottom     :    définit la marge en bas

Exemple  :

Voici un exemple de marge à l’interieur des bordures

p {width: 250px; border-style:outset;border-width:15px; border-color:black;padding-left: 75px;padding-right: 75px;padding-top: 75px;padding-bottom: 75px;}

Ce qui va afficher :

3 – La propriété Float

La propriété float fait flotter un objet à droite ou à gauche.

Exemple :

Pour faire flotter un paragraphe à droite on utilise le code :

p { float: right;width: 200px;border-style: solid;border-width: 5px;}