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

Leave a Reply

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock