Search Menu

Basic CSS : Margin et padding, qui est qui ?

margin-padding

Vous souhaitez modifier votre thème de blog et impossible de vous repérer dans les « borders », les « margins » et les « paddings ». Bien sûr, vous pouvez toujours essayer de modifier à l’aveuglette et voir ce que cela donne ou vous pouvez lire cet article et enfin arrêter de jouer à « Qui est Qui » (sans Marie-Ange Nardi ni Pépita, ce qui est tout de même beaucoup moins drôle).

Qui est qui ?

Prenons l’exemple d’un bloc div (si je vous ai déjà perdu, allez lire notre « introduction rapide au html« ).

Ce bloc div a un bord (qu’on appelle border en css). Jusque là tout va bien.
Le margin correspond à la marge extérieure de votre div, imaginez là comme un périmètre de sécurité, personne ne peut venir piétiner le terrain passé cette limite. Grace au margin, aucun autre bloc et contenu extérieur à votre div ne peut s’en approcher trop près.
Le padding, qui littéralement veut dire « rembourrage » correspond à la marge intérieure un peu comme quand si vous aviez ajouté un calage en mousse à votre div pour éviter qu’elle ne touche les bords. Elle permet par exemple à un texte de ne pas être coller au bord (c’est plus joli).

Grosso modo, ça donne ça :

div

et si je zoome sur le bord

padding-margin-border-css

C’est quoi ces chiffres pour régler les margins et les paddings ?

Contrairement aux cahiers qui n’ont qu’une seule marge, vos blocs html ont quatre marges : en haut, en bas, à droite et à gauche et vous allez pouvoir régler de manière différente ces quatres côtés. Vous pouvez les régler en pixels (px) ou % ou pt ou em.

Vous pouvez donc décider d’avoir un margin de 4 px en haut, 3px sur les deux côtés et 10 pixels en bas.

Soit vous indiquez chaque valeur séparément, comme ceci :

margin-top:4px;
margin-right:3px;
margin-bottom:10px;
margin-left:3px;

soit vous choisissez des les indiquer tous en même temps pour gagner de la place et du temps, ce qui nous donne ceci :

margin:4px 3px 10px 3px;

Que vous vouliez régler le padding, le margin ou le border, on tourne toujours dans le même sens histoire de s’y retrouver : on part d’en haut et on enchaine en tournant dans le sens des aiguilles d’une montre : haut,droite, bas et gauche.

Pourquoi j’ai pas 4 chiffres ?

Pour simplifier (ou compliquer, selon votre point de vue), il est possible de n’indiquer qu’une, deux ou trois valeurs. Voilà comment s’y retrouver dans ce cas.

valeur-padding- 1-2-3-4-chiffres

 

 

À propos de Laetitia

J'aime le papier, je déteste la paperasse.

Lire ses billets - Découvrir son blog

6 Comments Write a comment

  1. Rhaaaa, mais enfin une explication claire du « pourquoi j’ai pas 4 chiffres, mais 3 » ! (les autres, j’avais pigé, mais les 3, quel casse-tête !!) MERCI !

    Reply

Leave a Comment

Required fields are marked *.