Précédemment nous avons travaillé uniquement sur les balises de type block (pour les dimensions), mais sachez que tout ce que nous allons voir maintenant sur les marges s'applique indépendamment aux balises de type blocket aux balises de type inline.
Avant de vous donner les propriétés pour gérer les marges il faut avant tout savoir une chose : il y a deux types de marges.
Il y a les marges extérieures et les marges intérieures.
Les marges intérieures sont les distances entre les bords du bloc et le début du texte, et les marges extérieures sont les distances entre les bords du bloc et les bords de la fenêtre du navigateur internet du visiteur ou tout simplement le bloc suivant.
Voici les deux propriétés CSS que nous allons utiliser :
margin : pour la marge extérieure
padding : pour la marge intérieure
Par exemple si je veux que mes paragraphes aient une bordure intérieure de 10 pixels et une bordure extérieure de 30 pixels je fais
p { margin: 30px; padding: 10px; }
Gardez également à l'esprit que selon la balise il est possible qu'il existe déjà une bordure intérieure ou une bordure extérieure. Cependant lorsque vous attribuez une valeur à ces propriétés c'est votre valeur qui prend le dessus sur la valeur par défaut.
Il est également possible de donner des valeurs différentes aux marges gauche, droites, hautes et basses.
Voici les quatre mots-clés que nous allons utiliser : "top" pour le haut, "left" pour la gauche, "bottom" pour le bas, "right" pour la droite.
Voici ce que ça donne pour les marges extérieures :
margin-top : marge extérieure en haut
margin-right : marge extérieure à droite
margin-bottom : marge extérieure en bas
margin-left : marge extérieure à gauche
Et pour les marges intérieures :
padding-top : marge intérieure en haut
padding-right : marge intérieure à droite
padding-bottom : marge intérieure en bas
padding-left : marge intérieure à gauche
Vous pouvez également utiliser une notation plus rapide, comme ceci :
p { margin: 30px 10px 25px 15px; }
Là on attribue quatre valeurs à la propriété de marge extérieure (ça marche aussi pour les marges intérieures). On part toujours du haut en allant dans le sens des aiguilles d'une montre, comme pour les bordures.