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