Marges

2.1 Marges internes (Padding)

Les marges internes (padding) déterminent l'espace entre le contenu d'un élément et ses bords. Le padding peut être défini pour chaque côté de l'élément : en haut, à droite, en bas et à gauche. Les marges internes peuvent être utiles pour créer de l'espace autour du contenu de l'élément afin qu'il ne touche pas directement les bords.

Exemple d'utilisation

Dans cet exemple, un élément avec la classe .padding a des marges internes de 20 pixels de chaque côté, créant de l'espace autour du contenu.

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

    
      <div class="padding">
        C'est un élément avec des marges internes.
      </div>
    
  

2.2 Marges externes (Margin)

Les marges externes (margin) définissent l'espace entre un élément et les éléments voisins. Les marges externes peuvent être définies pour chaque côté de l'élément : en haut, à droite, en bas et à gauche. Les marges externes sont utiles pour créer de l'espace entre les éléments afin d'éviter qu'ils se chevauchent.

Exemple d'utilisation :

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

    
      <div class="margin">
        C'est un élément avec des marges externes.
      </div>
    
  

2.3 Interaction des composants du modèle de boîte

Les quatre composants du modèle de boîte (contenu, marges internes, bordures et marges externes) travaillent ensemble pour définir la taille globale et l'emplacement d'un élément sur la page.

Exemple d'interaction des composants :

    
      .box {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px solid #000;
        margin: 30px;
        width: 200px;
      }
    
  

    
      <div class="box">
        C'est un élément avec des marges internes et externes.
      </div>
    
  

Explication du code :

• Contenu : texte à l'intérieur de l'élément
• Marges internes : 20 pixels créant de l'espace entre le contenu et la bordure
• Bordures : 5 pixels entourant l'élément
• Marges externes : 30 pixels créant de l'espace entre l'élément et d'autres éléments sur la page

2.4 Marges externes négatives

Les marges externes peuvent avoir des valeurs négatives, ce qui entraîne un chevauchement des éléments.

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

    
      <div>
        C'est un élément normal
      </div>
      <div class="negative-margin">
        C'est un élément avec une marge supérieure négative.
      </div>
    
  

2.5 Effondrement des marges externes

Quand les marges externes verticales de deux blocs adjacents se rencontrent, elles peuvent s'effondrer pour former une marge unique égale à la plus grande des deux.

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

      .box2 {
        background-color: #d0d0d0;
        padding: 20px;
        border: 2px solid #000;
        margin-top: 20px;
      }
    
  

    
      <div class="box1">
        C'est le premier élément.
      </div>

      <div class="box2">
        C'est le deuxième élément. Les marges externes se sont effondrées jusqu'à 30 pixels.
      </div>