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 :

css marign et padding

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;
}