title: HTML / CSS - margin in flexbox
body: <p>I'm having a margin issue.
  Could someone explain to me where does the margin on this picture comes from ? I can't see where I would have set it in my code. When flex set on row, there still is a top margin but no margin in left.</p>
  <p><a href="https://i.stack.imgur.com/33Shq.png" rel="nofollow noreferrer">image</a></p>
  <p>I need to set margin on this element and I don't understand why I need to do that. Why is there this margin at the top of the container?</p>
  <pre><code>.form &gt; div{ 
      display:flex;
      flex-direction: row;
      gap: 2rem;
      border: 1px solid rgb(255, 255, 255);
      margin: 5px;
  }
  </code></pre>
  <p>Thanks</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      box-sizing: border-box;
      margin: 0;
  }
  
  body {
      font-family: 'Open Sans';
      font-size: 14px;
      color: #333;
  }
  
  .container { /* règles générale de mise en forme des containers */
      
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
      width: 100%;
    
  }
  
  
  
  h3{ /*  */
      font-family: 'Open Sans';
      font-weight: bolder;
      font-size: 2rem;
      text-align: center;
  }
  
  
  
  /*---------------------MENU------------------------------- */
  
  
  .menu &gt; div.container { /* couleur fond menu */
      background-color: #DD5555; 
  }
  
  
  .ElementsMenu { /* pour organiser le menu horizontalement avec espacements */
      display: flex;
      flex-wrap: wrap; /* éléments vont à la ligne si largeur de page trop petite */
      margin-left: 100px;
      gap: 2rem;
    }
  
    .ElementsMenu &gt; li { /* selectionne tous les éléments du menu */
      display: flex; 
      height: 52px; /* hauteur du menu */
      justify-content: center; /* centrer horizontalement */
      align-items: center; /* centrer verticalement */
      list-style: none; /* supprime les puces */
  } 
  
  
  
  a{ /* Mise en forme de la police du menu */
      text-decoration : none; /* supprimer soulignage du texte menu */
      color: #FFFFFF;
  }
  
  
  
  /*---------------------FIN MENU------------------------------- */
  
  
  
  
  
  
  
  
  
  /*---------------------INTRO------------------------------- */
  
  
  
  h1{ /* titre SUPER APP */
      text-align: center;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: 3rem;
      color: #FFFFFF;
     /* border: 1px solid white; */
  }
  
  h2{ /* sous-titre  */
      font-weight: normal;
      text-align: center;
      font-size: 1.7rem;
      color: #FFFFFF;
      margin-top: 5px;
     /* border: 1px solid white; */
  }
  
  .intro &gt; div.container{
      background-image: url("images/about.jpg.png"); /* image de fond */
      background-size: cover; /* pour que l'image prenne tout l'espace */
      height:848px; /* hauteur du conteneur */
      display: flex;
      flex-direction: column;
      gap: 10 px;
      align-items: center;  /* alignement horizontal */
      padding-top: 280px; /* alignement vertical */
  }
  
  
  hr{
      width:480px;
      margin-top:20px;
  } 
  
  div.icones{
      display: flex;
      margin: 0 auto;
      margin-top: 25px;
      gap: 4.5rem;
  }
  
  
  figure.icone{
      width  : 112px;
      height : 46px;
      display: flex;
      align-items: center;
      background-color: #FFFFFF ;
      border-radius: 5px;
  }
  
  .icone &gt; img{
     margin-left: 13px;
  }
  
  figcaption {
      margin-left: 15px;
      font-size: 18px;
    }
  
  
  /*---------------------FIN INTRO------------------------------- */
  
  
  
  
  
  
  /*---------------------SERVICES------------------------------- */
  
  .services{ /* titre et description en colonne */
      display: flex;
      flex-direction: column;
      gap: 1rem;
      background-color: #ffffff;
      height: 848px;
      padding-left:131px;
      padding-right:131px;
  }
  
  .services h3{ /* titre ELLE FAIT DES TRUCS SUPERS ! */
      margin-top: 52px;
  }
  
  .services .logo{ /* ronds rouges fond logos */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      background-color: #DD5555;
  
      display: flex; 
      justify-content: center; /* centrer horizontalement */
      align-items: center; /* centrer verticalement */
  
     /* border: 1px solid rgb(255, 255, 255); */
  }
  
  
  h4{ /* titres des services */
      font-family: 'Open Sans';
      font-weight: bolder;
      font-size: 1.5rem;
      text-align: center;
  }
  
  .txtServ{ /* texte descriptif des services */
      font-size: 16px;
      text-align: center;
  }
  
  
  
  
  
  .ligne1{ /* les trois 1er services disposés en ligne */
      display:flex;
      margin: 0 auto;
      justify-content:center;
      gap:2rem;
      margin-top:4rem;
      /* border: 1px solid rgb(0, 0, 0); */
  
  }
  
  
  
  .ligne2{ /* les trois derniers services disposés en ligne */
      display:flex;
      margin: 0 auto;
      justify-content:center;
      gap:2rem;
      margin-top:4rem;
      /* border: 1px solid rgb(0, 0, 0); */
  
  }
  
  .service1, .service2, .service3, .service4, .service5, .service6{ /* mise en forme de chaque élément service */
      display:flex;
      flex-direction: column;
      justify-content: center; /* centrer horizontalement */
      align-items: center; /* centrer verticalement */
      gap: 1.5rem;
     /* border: 1px solid rgb(83, 65, 201); */
      
  }
  
  
  
  /*---------------------FIN SERVICES------------------------------- */
  
  
  
  
  
  
  .team{ /* disposition titre et contenu en colonne */
      display: flex;
      flex-direction: column;
      
  }
  
  .team &gt; h1{ /* mise en forme titre */
      display: flex;
      justify-content: center;
      align-items: center;
      height:240px;
      background-image: url('images/team.jpg.png');
      background-size: cover;
      /* border: 1px solid rgb(83, 65, 201); */
  }
  
  .membres{ /*disposition membres en ligne */
      height: 494px;
      display:flex;
      margin: 0 auto;
      justify-content:space-between;
      gap:4rem;
      margin-top:4rem;
      margin-top: -15px;
  }
  
  .membres .avatar{
      height: 239px;
      border-radius: 50%;
  }
  
  .membres &gt; div{
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap:2rem;
  }
  
  .mail{
      width: 132px;
      height: 40px;
      border-radius: 5%;
      background-color: #DD5555;
      display: flex;
      justify-content: center;
      align-items: center;
      gap:0.5rem;
      margin-top: -20px;
  }
  
  .membres p{
      font-size: 18px;
      color: #FFFFFF;
  }
  
  
  
  
  
  
  .contact{ /*taille et fonc de section */
      height: 476px;
      background-color: #DD5555;
      border: 1px solid rgb(83, 65, 201);
  }
  
  
  .contact &gt; .container{ /* titre et contenu disposés verticalement */
      /* border: 1px solid rgb(0, 0, 0);*/
      display:flex;
      flex-direction: column;
      gap:2rem;
      border: 1px solid rgb(255, 255, 255);
   }
  
  .contact h3{ /* titre */
      color: #FFFFFF;
      margin-top: 52px;
      border: 1px solid rgb(255, 255, 255);
  }
  
  
  
  .form{ /* lignes du form en colonnes */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap:1rem;
      border: 1px solid rgb(0, 0, 0);
  }
  
  .form &gt; div{ /* éléments de chaque lignes disposés en ligne */
      display:flex;
      flex-direction: row;
      gap: 2rem;
      border: 1px solid rgb(255, 255, 255);
  }
  
  .ligne1 &gt; div{ /* intitulés et cases de ligne1 en colonne */
      display: flex;
      flex-direction: column;
  }
  
  .ligne1 .case{ /* mise en forme cases nom et mail*/
     width: 358px; 
     height: 32px;
     background-color: #FFFFFF;
     border-radius: 2%;
  }
  
  
  .mess .case{ /* mise en forme case mess*/
      width: 748px;
      height: 112px;
      background-color: #FFFFFF;
      border-radius: 2%;
      margin-top: 4px;
  }
  
  
  .contact p{ /* mise en forme intitulés */
      font-size: 18px;
      color: #FFFFFF;
  }
  
  
  /*
  
  .ligne2{
  }
  
  
  .ligne3{
      /*width: 123px;
      height: 46px;
      background-color: #FFFFFF;
     /* border: 1px solid rgb(83, 65, 201);
  } */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;SuperApp&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
      &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="menu"&gt;
              &lt;div class="container"&gt;
                  &lt;nav&gt;
                      &lt;ul class="ElementsMenu"&gt;
                          &lt;li class="logo"&gt;&lt;img src="images/Logo.png"  alt="Logo"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;&amp;Agrave propos&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Services&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;L'équipe&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;main&gt;
          &lt;section class="intro"&gt;
              &lt;div class="container"&gt;
                      &lt;h1&gt; SUPER APP !&lt;/h1&gt;
                      &lt;h2&gt; L'application trop super !&lt;/h2&gt;
                      &lt;hr&gt;&lt;/hr&gt;
                      &lt;div class="icones"&gt;
                          &lt;figure class="icone"&gt; 
                              &lt;img src="images/thumbs-up.svg" alt="Like it"&gt; 
                              &lt;figcaption&gt;Like it&lt;/figcaption&gt; &lt;/figure&gt;
                          &lt;figure class="icone"&gt; 
                              &lt;img src="images/heart-shape-silhouette.svg" alt="Love it"&gt; 
                              &lt;figcaption&gt;Love it&lt;/figcaption&gt; &lt;/figure&gt;
                          &lt;figure class="icone"&gt; 
                              &lt;img src="images/shopping-cart-black-shape.svg" alt="Buy it"&gt; 
                              &lt;figcaption&gt;Buy it&lt;/figcaption&gt; 
                          &lt;/figure&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class="services"&gt;
              &lt;h3&gt;ELLE FAIT DES TRUCS SUPERS !&lt;/h3&gt;
              &lt;div class="ligne1"&gt;
                  &lt;div class="service1"&gt;
                      &lt;div class="logo"&gt;&lt;img src="images/fork-and-knife-silhouette.svg"&gt;&lt;/div&gt;
                      &lt;h4&gt;Mettre la table&lt;/h4&gt;
                      &lt;p class="txtServ"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="service2"&gt;
                      &lt;div class="logo"&gt;&lt;img src="images/bed.svg"&gt;&lt;/div&gt;
                      &lt;h4&gt;Faire le lit&lt;/h4&gt;
                      &lt;p class="txtServ"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.&lt;/p&gt;
  
                  &lt;/div&gt;
                  &lt;div class="service3"&gt;
                      &lt;div class="logo"&gt;&lt;img src="images/fire-symbol.svg"&gt;&lt;/div&gt;
                      &lt;h4&gt;Allumer le feu&lt;/h4&gt;
                      &lt;p class="txtServ"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.&lt;/p&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="ligne2"&gt;
                  &lt;div class="service4"&gt;
                      &lt;div class="logo"&gt;&lt;img src="images/plant-leaf-with-white-details.svg"&gt;&lt;/div&gt;
                      &lt;h4&gt;Ramasser les feuilles&lt;/h4&gt;
                      &lt;p class="txtServ"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="service5"&gt;
                      &lt;div class="logo"&gt;&lt;img src="images/umbrella-black-silhouette.svg"&gt;&lt;/div&gt;
                      &lt;h4&gt;Protéger de la pluie&lt;/h4&gt;
                      &lt;p class="txtServ"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.&lt;/p&gt;
  
                  &lt;/div&gt;
                  &lt;div class="service6"&gt;
                      &lt;div class="logo"&gt;&lt;img src="images/dollar-symbol.svg"&gt;&lt;/div&gt;
                      &lt;h4&gt;Vider votre compte&lt;/h4&gt;
                      &lt;p class="txtServ"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.&lt;/p&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section class="team"&gt;
              &lt;h1&gt;La super équipe à l'origine de SuperApp&lt;/h1&gt;
              &lt;div class="membres"&gt;
                  &lt;div class="m1"&gt;
                      &lt;img class="avatar" src="images/avaone.jpg.png" alt="membre1"&gt;
                      &lt;h4&gt;Tex Talign&lt;/h4&gt;
                      &lt;div class="mail"&gt;
                          &lt;img src="images/envelope.svg" alt="envelope"&gt;
                          &lt;p&gt;Lui écrire&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="m2"&gt;
                      &lt;img class="avatar" src="images/avatwo.jpg.png" alt="membre2"&gt;
                      &lt;h4&gt;Marge Inn&lt;/h4&gt;
                      &lt;div class="mail"&gt;
                          &lt;img src="images/envelope.svg" alt="envelope"&gt;
                          &lt;p&gt;Lui écrire&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="m3"&gt;
                      &lt;img class="avatar" src="images/avathree.jpg.png" alt="membre3"&gt;
                      &lt;h4&gt;Isaac Newton&lt;/h4&gt;
                      &lt;div class="mail"&gt;
                          &lt;img src="images/envelope.svg" alt="envelope"&gt;
                          &lt;p&gt;Lui écrire&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="m4"&gt;
                      &lt;img class="avatar" src="images/avafour.jpg.png" alt="membre4"&gt;
                      &lt;h4&gt;Ash Tehemel&lt;/h4&gt;
                      &lt;div class="mail"&gt;
                          &lt;img src="images/envelope.svg" alt="envelope"&gt;
                          &lt;p&gt;Lui écrire&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section class="contact"&gt;
              &lt;div class="container"&gt;
                  &lt;h3&gt;ENVOYEZ-NOUS UN MESSAGE&lt;/h3&gt;
                  &lt;div class="form"&gt;
  
                      &lt;div class="ligne1"&gt;
                          &lt;div class="nom"&gt;
                              &lt;p&gt;Votre nom&lt;/p&gt;
                              &lt;div class="case"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="email"&gt;
                              &lt;p&gt;Votre e-mail&lt;/p&gt;
                              &lt;div class="case"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ligne2"&gt;
                          &lt;div class="mess"&gt;
                              &lt;p&gt;Votre message&lt;/p&gt;
                              &lt;div class="case"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ligne3"&gt;
                          
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
          &lt;/section&gt;
  
  
      &lt;/main&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>