Introduction au modèle en blocs

1.1 Les bases du modèle en blocs

Le modèle en blocs est la base pour comprendre comment les éléments sont placés et interagissent les uns avec les autres sur une page web. Il définit la structure et les tailles des éléments HTML, ainsi que la façon dont ils sont entourés par les marges, les bordures et les espaces extérieurs.

Les bases du modèle en blocs

Le modèle en blocs CSS décrit la composition des blocs d'éléments HTML. Chaque élément se compose de quatre composants principaux :

• Contenu (content).
• Marge intérieure (padding).
• Border (border).
• Marge extérieure (margin).

Ces composants déterminent comment un élément sera affiché et comment il interagira avec d'autres éléments sur la page.

Contenu (Content)

Le contenu (content) est la partie principale de l'élément, où se trouve le texte, les images ou d'autres éléments imbriqués. Les tailles de contenu peuvent être définies explicitement par les propriétés width et height, ou être déterminées par le contenu de l'élément.

Exemple d'utilisation

Dans cet exemple, le contenu de l'élément .content inclut le texte "Ceci est le contenu de l'élément.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Ceci est le contenu de l'élément.
      </div>
    
  

1.2 Visualisation du modèle en blocs

Chaque élément dans le modèle en blocs peut être représenté sous la forme d'un bloc rectangulaire, composé des parties suivantes :

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

Visualisation du modèle en blocs :

    
      .element {
        width: 200px;           /* Largeur du contenu */
        padding: 10px;          /* Marge intérieure */
        border: 2px solid red;  /* Border */
        margin: 20px;           /* Marge extérieure */
      }
    
  

1.3 Bordures (Border)

Les bordures (border) entourent le contenu et les marges intérieures de l'élément. Les bordures peuvent avoir différents styles, épaisseurs et couleurs. Elles peuvent être utilisées pour mettre en évidence visuellement les éléments sur la page.

Exemple d'utilisation

Dans cet exemple, une bordure de 5 pixels d'épaisseur, en pointillés et de couleur noire est appliquée à l'élément .border, qui entoure le contenu et les marges intérieures.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Ceci est un élément avec une bordure.
      </div>