Dans cet article, nous allons plonger dans le monde fascinant du modèle de boîte en HTML. Le modèle de boîte est un concept qui joue un rôle essentiel dans la mise en page de toutes les pages web que tu vois en ligne. Alors, prépare-toi à plonger dans le monde des boîtes, des marges et des paddings !
En CSS, tous les élémments sont entourés par une boite (box). Cette boite n'est pas directement visible pour les visiteurs de ta page web ni dans ton code HTML, mais elle a un impact important sur la façon dont les éléments sont affichés.
Comme il s'agit bien d'une question d'affichage (et pas de structure), tout ce qui concerne le box model est géré en CSS.
Commençons par découvrir c'est qu'est le modèle de boite, ensuite nous verrons les 2 types de boites principaux et comment les utiliser.
Le modèle de boîte (🇬🇧 box model) en HTML se réfère à la façon dont chaque élément HTML est représenté comme une boîte rectangulaire. Chaque boîte a quatre composantes principales :
Le contenu (Content) : C'est la partie intérieure de la boîte qui contient le texte, les images ou tout autre élément que tu places à l'intérieur de la balise HTML (la partie bleue, entourée par des pointillés).
La bordure (Border) : La bordure est une ligne qui entoure le contenu de la boîte. Elle peut être solide, pointillée, ou d'autres styles en fonction de ce que tu définis (en gris).
Le padding (Padding) : Le padding est l'espace entre la bordure et le contenu de la boîte. Cela permet de définir une séparation entre le contenu et la bordure. Elle agit comme une marge intérieure_ (en mauve)
La marge (Margin) : La marge entoure la boîte et sépare cette boîte des autres éléments de la page. Elle crée de l'espace autour de l'élément, à l'extérieur (en jaune).
Les éléments de type "block" et "inline" sont deux concepts essentiels pour comprendre comment les éléments sont disposés et affichés sur une page web.
Les éléments "block" sont des éléments HTML qui occupent toute la largeur disponible et commencent sur une nouvelle ligne. Cela signifie que chaque élément "block" commence sur une nouvelle ligne et s'étend horizontalement pour occuper toute la largeur de son conteneur.
Exemples courants d'éléments "block" :
<div><p><h1>, <h2>, <h3>, etc.<ul>, <ol>, <li><form><header>, <footer>Lorsque tu utilises des éléments "block", ils s'empilent verticalement les uns sur les autres, créant une structure de page bien définie.
On peut spécifier/changer la hauteur et la largeur d'un élément de type block.
Les éléments block acceptent les marges et padding en haut, en bas, à gauche et à droite,.
Les éléments "inline", en revanche, ne commencent pas sur une nouvelle ligne et occupent seulement la largeur nécessaire pour afficher leur contenu. Ils permettent donc de placer plusieurs éléments côte à côte sur la même ligne.
Exemples courants d'éléments "inline" :
<span><a><strong>, <em><img><button>L'utilisation d'éléments "inline" est idéale pour intégrer du texte ou des éléments en ligne dans un paragraphe ou une phrase, sans interrompre la mise en page.
Il n'est pas possible de changer la hauteur/largeur d'un élément inline.
Les éléments inline n'appliquent pas de marges et de padding verticaux.
Pour centrer un élément block, il faut lui appliquer une largeur (par ex 80%) et des marges horizontales auto:
.container {
width: 80%;
margin: auto;
background-color: #eee;
}<div class="container">
<span>Ce div est centré sur la page. Mais son contenu est centré à gauche.</span>
</div>Les éléments ìnline, quant à eux, ne peuvent pas se centrer tout seuls puisqu'ils occupent tout juste la place dont ils ont besoin. Pour centrer un/des élément(s) inline, il faut demander à leur parent de les centrer en appliquant la propriété css text-align:
.container {
text-align: center;
background-color: #eee;
}<div class="container">
<span>Texte centré dans un div</span>
</div>Il est important de comprendre la différence entre les éléments "block" et "inline" pour une mise en page web cohérente. Voici quelques bonnes pratiques :
En comprenant la différence entre les éléments "block" et "inline", tu seras en mesure de créer des mises en page web efficaces et bien structurées. Ces concepts de base sont essentiels pour toute personne qui souhaite devenir un développeur web compétent.
N'hésite pas à pratiquer en créant tes propres pages web et en utilisant à bon escient les éléments "block" et "inline". Plus tu pratiques, plus tu deviens fort dans l'art de la mise en page web.
Amuse-toi bien à explorer le monde du développement web, et à bientôt pour de nouvelles découvertes ! 😊