Il existe deux types de marge applicables aux balises : les marges internes (padding) et les marges externes (margin).
Ces marges sont disponibles pour les balises de type bloc, mais elles ne le sont pas forcément pour les balise de type inline.
margin : les marges externes
Il est possible d'espacer des balises entre elles avec la propriété margin. Cette propriété peut être utilisée pour définir une marge externe :
- en haut,
- en bas,
- à droite,
- à gauche.
Voilà la syntaxe en CSS :
div{
margin-top : 250px;
margin-bottom : 250px;
margin-right : 250px;
margin-left : 250px;
}
Attention ! Les marges haute et basse ne sont valable que pour les balise de type block. Les balises de type inline ne peuvent avoir que des marges à droite ou à gauche.
Il est possible d'utiliser plusieurs unités :
- Les pixels : ils permettent de définir une valeur fixe, absolue et identique sur tous les navigateurs.
- Les ems : ils permettent de définir une valeur proportionnelle à la taille des caractères utilisés dans la page.
- Les pourcentages : ils permettent de définir une valeur dynamique basée sur la taille de l'élément parent.
- Les vw : ils permettent de définir un pourcentage de la largeur du navigateur. Par exemple, 100vw = 10% de la largeur du navigateur, alors que 50vw n'en fait que 50%.
- Les vh : ils permettent de définir un pourcentage de la hauteur du navigateur. Par exemple, 100vw = 10% de la hauteur du navigateur, alors que 20vw n'en fait que 20%.
La valeur auto pour centrer une balise
Si vous voulez centrer un bloc au milieu de votre page, il est possible d'utiliser la valeur auto
div{
width: 500px;
margin-right: auto;
margin-left: auto;
}
Ici, nous définissons la taille de la div à 500px, puis les propriétés margin nous permettent de la centrer dans le navigateur.
Attention ! La valaur auto ne marche que pour centrer la balise sur l'horizontalité. Pour la centrer verticalement, il faudra s'y prendre différement. Nous verrons ça plus tard dans les cours.
Regroupper les valeurs pour un code plus lisible
Il est possible de regrouper les valeurs des marges si elles sont identiques. Ainsi, on ne pourra écrire :
- qu'une valeur si les 4 sont identiques,
- que deux valeurs si les verticales sont identiques, et les horizontales les mêmes ;
- que trois valeur si les verticales sont différentes et les horizontales identiques,
- que quatre valeurs si les 4 sont différentes
Voilà la syntaxe en CSS :
/* La propriété s'applique aux quatre côtés */
margin: 25px;
/* vertical | horizontal */
margin: 25px auto;
/* haut | horizontal | bas */
margin: 25px auto 50px;
/* haut | droit | bas | gauche */
margin: 25px 30px 50px 0;
Le fait décrire les marges de cette manière permet d'avoir un code moins long et plus lisible. Néanmoins, ça n'est pas une obligation.
padding : les marges internes
Le second type de marge est le padding. Ces marges permettent de fixer une zone entre la limite de notre balise et son contenu.
Le padding est très utile pour définir un blanc tournant au sein de nos blocs.
Cette propriété utilise les mêmes valeurs que le margin (pixel, em, %, vw, vh) et sa syntaxe est similaire :
div{
padding-top : 50px;
padding-bottom : 50px;
padding-right : 50px;
padding-left : 50px;
}
De même, il est possible de regroupper les valeurs identiques entre elles :
/* La propriété s'applique aux quatre côtés */
padding: 25px;
/* vertical | horizontal */
padding: 25px 50px;
/* haut | horizontal | bas */
padding: 25px 50px 150px;
/* haut | droit | bas | gauche */
padding: 25px 30px 50px 0;