Gestion de l'espace
Système de boîtes
Tous les éléments d'une page HTML sont essentiellement une boîte. À son plus simple, cette boîte a seulement une largeur et une hauteur qui sont très souvent définie par ce que contient la balise et par son type d'affichage. Toutefois, il est possible d'ajouter des marges, des bordures et de l'espacement dans cette boîte, ce qui peut compliquer les choses un peu. La terminologie ici est importante, je vous demande donc de bien comprendre le schémas suivant:
Un élément HTML ressemble à l'exemple ci-dessus. Il est important de bien comprendre les différentes sections de la boîte.
- Bordure
- C'est la bordure de l'élément HTML. Par défaut, le navigateur n'en mets tout simplement pas, mais on peut l'activer avec du CSS.
- Padding
- C'est l'espacement entre le contenu de la boîte et sa bordure. La majorité des éléments en HTML n'ont pas de padding par défaut. Il est toutefois possible d'en ajouter avec du CSS.
- Margin
- C'est l'espacement entre la bordure de la boîte et les autres éléments de la page Web. Certains éléments HTML ont un margin par défaut, comme les <h?> ou la balise <body>. Il est toutefois possible d'en ajouter ou de le modifier avec du CSS.
Calcul des boîtes
Par défaut, le calcul de la taille des boîtes n'est pas très pratique pour nous. En effet, le calcul de base de la taille d'un élément ne comprends pas le padding et la bordure, mais juste le contenu de la boîte. Cela peut compliquer énormément le stylage des différents éléments de votre site web, surtout si nous essayons de mettre des éléments un à côté de l'autre ou un en dedans de l'autre. Nous pouvons toutefois changer la façon dont le calcul est fait avec la propriété CSS box-sizing.
Taille
Pour modifier la taille d'un élément, vous pouvez utiliser les propriétés CSS width et height qui modifient respectivement la largeur et la hauteur du contenu de la boîte.
Padding
Le padding est l'espacement intérieur entre la bordure d'un élément et son contenu. Pour modifier le padding d'un élément HTML, nous utiliserons les propriétés CSS padding, padding‑top, padding‑right, padding‑bottom et padding‑left. La première propriété est un raccourci qui permet de spécifier le padding de plusieurs côté à la fois alors que les 4 autres propriétés vont uniquement modifier le padding d'un seul côté.
Il est aussi possible de modifier le padding à gauche et à droite ou du haut et du bas dans la même propriété padding de la façon suivante:
Margin
Le margin est l'espacement autour de la bordure de l'élément. Le margin n'est jamais considéré dans la taille de l'élément. Pour modifier le margin d'un élément HTML, nous utiliserons des propriétés CSS similaire au padding comme margin, margin‑top, margin‑right, margin‑bottom et margin‑left.
Les propriétés fonctionnent de la même façon que pour le padding. Vous pouvez donc utiliser la propriété margin comme raccourci pour mettre du margin sur multiples côtés.