Sommaire

Utilisation de padding et margin

Il s’agit de deux propriétés très simples et qu’il faut absolument maîtriser parfaitement, aussi bien pour leur écriture en CSS qui est vraiment aisée que pour leur importance dans l’affichage esthétique d’une page.

La première, padding, permet de définir la marge à l’intérieur d’un bloc. Sans ce padding, si le bloc contient du texte, il sera collé au bord du bloc.

Pour aérer un peu il sera possible d’écrire : padding

padding : 4px ;

Le bloc aura alors une marge interne de 4 pixels, sur les quatre côtés.

Pour appliquer des valeurs différentes à chacun des côtés, l’écriture peut se faire en notant la marge en haut (5px) en premier puis celle de droite (0px), celle du bas (3px) et la marge intérieure gauche (0px) pour finir.

padding : 5px 0 3px 0;

Les valeurs étant simplement séparées d’un espace.

Si seulement deux valeurs sont écrites, la première correspond aux marges intérieures haute et basse, la seconde valeur étant pour les marges gauche et droite.

S’il n’y a qu’une valeur, elle s’applique aux quatre côtés.

Il est possible également de préciser le nom d’une marge et de lui donner sa valeur.

padding-left : 5px ; 
padding-bottom : 4px ;

padding s’occupe donc de la marge intérieure ...