Modèle en boîte HTML

9.1 Éléments en bloc

Modèle en boîte HTML — c'est un concept qui décrit la structure et l'affichage des éléments HTML dans un document. Ça aide les développeurs à comprendre comment les éléments interagissent entre eux et comment ils sont disposés sur la page. Comprendre le modèle en boîte est important pour créer des pages web structurées et esthétiquement attrayantes.

Le modèle en boîte HTML est composé de deux principaux types d'éléments : en bloc et en ligne. Ces éléments jouent un rôle clé dans la mise en page des pages web.

Éléments en bloc

Exemple d'élément en bloc :

    
      <div>
        <h1>Titre</h1>
        <p>C'est un paragraphe de texte à l'intérieur de l'élément en bloc div.</p>
      </div>
    
  

9.2 Éléments en ligne

Éléments en ligne (inline-level elements) occupent seulement la largeur nécessaire pour leur contenu et ne commencent pas sur une nouvelle ligne. Ils peuvent contenir seulement des éléments en ligne ou du texte. Exemples d'éléments en ligne :

Exemple d'élément en ligne :

    
      <span>C'est un paragraphe avec <strong>du texte en gras</strong> et <em>en italique</em>.</span>
    
  

9.3 Composants du modèle en boîte

Chaque élément dans le modèle en boîte peut être représenté sous forme de bloc rectangulaire comprenant les parties suivantes :

• Contenu (Content) : le contenu interne de l'élément, par exemple, du texte ou une image
• Remplissage interne (Padding) : l'espace entre le contenu et la bordure de l'élément
• Bordure (Border) : la ligne entourant le remplissage interne et le contenu
• Marge externe (Margin) : l'espace entre la bordure de l'élément et les éléments voisins

Visualisation du modèle en boîte :

    
      .element {
        width: 200px;           /* Largeur du contenu */
        padding: 10px;          /* Remplissage interne */
        border: 2px solid red;  /* Bordure */
        margin: 20px;           /* Marge externe */
      }
    
  

Exemple HTML avec le modèle en boîte :

Dans cet exemple, l'élément <div> avec la classe "box" a une largeur de 200px, un remplissage interne de 10px, une bordure de 2px et une marge externe de 20px. Ces propriétés définissent comment l'élément est affiché sur la page et interagit avec d'autres éléments.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        C'est un exemple de modèle en boîte.
      </div>