Modèle de la boîte

Dans la continuité des bordures, nous allons maintenant étudier les propriétés padding et margin qui correspondent réciproquement à la marge intérieure et à la marge extérieure. Ces trois propriétés forment donc le modèle de la boîte.

 Rappel sur les blocks

Par défaut, lorsque nous créons un block, un paragraphe par exemple, celui-ci aura déjà des caractéristiques. Sa largeur prendra en général toute la page, et sa hauteur sera celle de son contenu. Nous pouvons cependant donner une largeur et une hauteur définies en pixel en utilisant les propriétés width et heigt. On peut également distinguer une petite marge extérieure par rapport à l’élément qui le contient (ici, le paragraphe est contenu directement dans le body). Pour mieux visualiser ce qu’il se passe, je rajoute une couleur au background du paragraphe et à celui du body :

Margin, ou la marge extérieure

Lorsque l’on veut donner une marge à un block, il y a différentes manières de faire. Tout  d’abord, si l’on veut la même marge de tous les côtés, on va tout simplement utiliser la propriété générale : margin. Ci-dessous, je demande une marge de 100 pixels :

vous pouvez tester et changer la taille de la fenêtre de votre navigateur, vous verrez qu’il s’efforce de garder la marge inchangée autant que possible.
Ensuite, si vous préférez appliquer des marges différentes aux côtés du block, vous pouvez procéder de deux façons : soit vous utilisez la propriété générale et vous lui appliquez les différentes valeurs. La première sera la marge du haut, puis on tourne dans le sens des aiguilles d’une montre en séparant les valeurs par un espace comme dans l’exemple ci-dessous :

 

(dans le cas où vous désirez mettre la même marge à droite et à gauche, et la même marge en haut et en bas, vous pouvez ne mettre que les deux valeurs correspondantes. La première s’appliquera en haut et en bas, et la deuxième à droite et à gauche).
Soit vous utilisez les propriétés plus spécifiques que sont margin-top, margin-left… Ce code donnera le même résultat :

Padding, ou la marge intérieure

Le padding fonctionne exactement de la même manière que le margin. Vous avez la propriété générale padding et les propriétés spécifiques padding-top, padding-right…
Si je choisis d’appliquer une marge intérieure de 50 pixels, comme vous le voyez ci-dessous, la marge extérieure au paragraphe ne change pas. Manquant de place, le texte se déplace automatiquement à la ligne.

  

Border, la séparation des marges

Nous avons vu en détail la propriété border dans le cours précédent, cliquez-ICI pour y accéder. Ce qu’il faut retenir ici, c’est que la bordure sera la limite entre le margin (la marge extérieure, et le padding (la marge intérieure). La bordure, s’insère entre les deux sans jamais modifier leurs valeurs. Si le contenu manque de place, il va simplement faire un retour à la ligne.

 

Ce qu’il faut retenir : le modèle de la boîte

Lorsque nous créons un élément de type block, on peut lui donner de nombreuses caractéristiques pour le personnaliser. Pour retenir ses caractéristiques, on parle de modèle de la boîte, facile à retenir grâce à ce schéma très simple :

 

 

 

 

 

 

 

J’espère que ce cours vous a plu, laissez moi un commentaire ou un message si vous avez besoin d’éclaircissement, JB.