Quelques styles :

Pour manipuler le CSS, il faut en connaitre les styles !
Ici, nous allons voir les styles principaux !

margin - padding

Margin permet de contrôler les marges extérieures d'un paragraphe, d'un titre ...
Padding permet de contrôler les marges intérieures de votre paragraphe.
Voici une petite illustration des margin et padding :
Illustration de margin et padding
Margin :

L'utilisation est simple, pour donner une marge extérieure :
• en haut : margin-top
• à droite : margin-right
• en bas : margin-bottom
• à gauche : margin-left
On peut aussi donner une même marge extérieure égale pour toutes les directions en utilisant margin:

Padding

L'utilisation est la même, pour donner une marge intérieure :
• en haut : padding-top
• à droite : padding-right
• en bas : padding-bottom
• à gauche : padding-left
Pour donner une marge intérieure égale pour chaque direction, on utilisera margin:

Application des marges :

p {
    padding: 3px; /* Marge intérieure de 3pixels */
    margin: 10px; /* Marge extérieure de 10pixels */
}

<p>
Ici je place le contenu de mon paragraphe !
<br />
Je raconte ma vie à mes visiteurs ..
<br />
Je leur dis qu'ils sont au début de leur carrière en création de site web,
<br />
Et que si ils continuent comme ça, ils vont vite progresser !!
<br />
Bon allez, je fini cet interminable paragraphe !
</p>

Biensur, si on regarde le résultat, on y verra strictement rien, et pour cause, il n'y a aucune bordure pour nous permettre de comparer margin et padding.
Nous devons donc nous coller de suite au style permettant de définir une bordure !

border

Le style border est simple à comprendre !
C'est lui qui va nous permettre de déterminer votre bordure à la taille, à la couleur et au style voulu !
Nous pouvons donc disposer de bordures de 1 pixel d'épaisseur comme de bordures de 20 pixels d'épaisseur !
L'utilisation de border est simple !
Je veux une bordure :

• en haut : border-top
• à droite : border-right
• en bas : border-bottom
• à gauche : border-left
Vous remarquerez que les extensions ( top - right - bottom - left ) sont toujours les même pour chaque style !
C'est de l'anglais qui veut biensur dire :
top : Haut
right : Droite
bottom : Bas
left : Gauche
Ces quatre noms sont à retenir !! Ils vous serviront !!
Passons à l'application de border dans notre feuille de style précédente :

p {
    padding: 3px; /* Marge intérieure de 3pixels */
    margin: 10px; /* Marge extérieure de 10pixels */
    border: 1px solid #000000; /* Je veux une bordure
    de 1 pixel d'épaisseur, solide ( trait continu )
    et de couleur noire */
}

» Exemple

Se simplifier la vie entre top - right - bottom - left !
Pour éviter de mettre ces quatre fonctions là dans votre CSS ( ce qui devient long à écrire ! ), utilisez la façon rapide !
Cette façon est utile lorsque vous avez 4 valeurs différentes pour chaques directions.
Au lieu d'écrire :

p {
    margin-top: 5px; /* Marge extérieure en haut */
    margin-right: 8px; /* Marge extérieure à droite */
    margin-bottom: 7px; /* Marge extérieure en bas */
    margin-left: 2px; /* Marge extérieure à gauche */
}

Utilisez la méthode rapide, écrivez :

p {
    margin: 5px 8px 7px 2px; /* Marge extérieure : haut droite bas gauche */
}

Vous voyez le gain de temps !
Si vous avez bien suivi, depuis le début de ce tuto, je vous ai imposé un style d'écriture, d'abord la direction haute, ensuite la droite, le bas et enfin la gauche !
( vous remarquerez qu'il s'agit du sens horaire )
Et bien ici, les valeurs correspondent au sens horaire des directions !
Retenez bien ce sens et cette façon de gagner du temps, elle vous sera utile par la suite !
Dernière remarque, si vous voulez une valeur nulle en CSS, inutile d'écrire de cette façon :
margin-top: 0px;
Pour les valeures nulles, il n'est pas obligatoir de préciser l'unité utilisée !
Et voila pour ces trois styles CSS !
D'autres seront bientôt mis en ligne dans cette page, je vous invite à revenir de temps en temps !

« Tuto