HTML / CSS - 保證金 flexbox

Question

我有保證金問題。 有人可以向我解釋這張照片的邊距是從哪里來的嗎？ 我看不到我應該在我的代碼中設置它的位置。 當在行上設置 flex 時，仍然有上邊距但左邊沒有邊距。

圖片

我需要在這個元素上設置邊距，但我不明白為什么我需要這樣做。 為什么容器頂部有這個邊距？

.form > div{ 
    display:flex;
    flex-direction: row;
    gap: 2rem;
    border: 1px solid rgb(255, 255, 255);
    margin: 5px;
}

謝謝

 *{ 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 > 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 > 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 > 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 > 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 > 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 > 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 >: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 > 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 > 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); } */

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>SuperApp</title> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2.family=Open+Sans&display=swap" rel="stylesheet"> </head> <body> <header> <div class="menu"> <div class="container"> <nav> <ul class="ElementsMenu"> <li class="logo"><img src="images/Logo.png" alt="Logo"></li> <li><a href="">&Agrave propos</a></li> <li><a href="">Services</a></li> <li><a href="">L'équipe</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> </div> </header> <main> <section class="intro"> <div class="container"> <h1> SUPER APP.</h1> <h2> L'application trop super.</h2> <hr></hr> <div class="icones"> <figure class="icone"> <img src="images/thumbs-up.svg" alt="Like it"> <figcaption>Like it</figcaption> </figure> <figure class="icone"> <img src="images/heart-shape-silhouette.svg" alt="Love it"> <figcaption>Love it</figcaption> </figure> <figure class="icone"> <img src="images/shopping-cart-black-shape.svg" alt="Buy it"> <figcaption>Buy it</figcaption> </figure> </div> </div> </section> <section class="services"> <h3>ELLE FAIT DES TRUCS SUPERS.</h3> <div class="ligne1"> <div class="service1"> <div class="logo"><img src="images/fork-and-knife-silhouette.svg"></div> <h4>Mettre la table</h4> <p class="txtServ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.</p> </div> <div class="service2"> <div class="logo"><img src="images/bed.svg"></div> <h4>Faire le lit</h4> <p class="txtServ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.</p> </div> <div class="service3"> <div class="logo"><img src="images/fire-symbol.svg"></div> <h4>Allumer le feu</h4> <p class="txtServ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.</p> </div> </div> <div class="ligne2"> <div class="service4"> <div class="logo"><img src="images/plant-leaf-with-white-details.svg"></div> <h4>Ramasser les feuilles</h4> <p class="txtServ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.</p> </div> <div class="service5"> <div class="logo"><img src="images/umbrella-black-silhouette.svg"></div> <h4>Protéger de la pluie</h4> <p class="txtServ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.</p> </div> <div class="service6"> <div class="logo"><img src="images/dollar-symbol.svg"></div> <h4>Vider votre compte</h4> <p class="txtServ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci reiciendis voluptate beatae nihil.</p> </div> </div> </section> <section class="team"> <h1>La super équipe à l'origine de SuperApp</h1> <div class="membres"> <div class="m1"> <img class="avatar" src="images/avaone.jpg.png" alt="membre1"> <h4>Tex Talign</h4> <div class="mail"> <img src="images/envelope.svg" alt="envelope"> <p>Lui écrire</p> </div> </div> <div class="m2"> <img class="avatar" src="images/avatwo.jpg.png" alt="membre2"> <h4>Marge Inn</h4> <div class="mail"> <img src="images/envelope.svg" alt="envelope"> <p>Lui écrire</p> </div> </div> <div class="m3"> <img class="avatar" src="images/avathree.jpg.png" alt="membre3"> <h4>Isaac Newton</h4> <div class="mail"> <img src="images/envelope.svg" alt="envelope"> <p>Lui écrire</p> </div> </div> <div class="m4"> <img class="avatar" src="images/avafour.jpg.png" alt="membre4"> <h4>Ash Tehemel</h4> <div class="mail"> <img src="images/envelope.svg" alt="envelope"> <p>Lui écrire</p> </div> </div> </div> </section> <section class="contact"> <div class="container"> <h3>ENVOYEZ-NOUS UN MESSAGE</h3> <div class="form"> <div class="ligne1"> <div class="nom"> <p>Votre nom</p> <div class="case"></div> </div> <div class="email"> <p>Votre e-mail</p> <div class="case"></div> </div> </div> <div class="ligne2"> <div class="mess"> <p>Votre message</p> <div class="case"></div> </div> </div> <div class="ligne3"> </div> </div> </div> </section> </main> </body> </html>

Answer 1

.ligne1{ /* les trois 1er services disposés en ligne */
    display:flex;
    margin: 0 auto;
    justify-content:center;
    gap:2rem;
    margin-top:4rem; /* <<<< HERE IS YOUR MARGIN */
    /* border: 1px solid rgb(0, 0, 0); */
}

通過使用瀏覽器的開發人員工具檢查 DOM ，您可以輕松找到此信息。

Answer 2

差距來自：

.contact > .container {
    /* border: 1px solid rgb(0, 0, 0); */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

刪除間隙：2rem； 差距消失了