Supprimer les espaces verticaux entre mes blocs

Anouchka2586 Messages postés 50 Date d'inscription   Statut Membre Dernière intervention   -  
nulenmathe Messages postés 425 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
J'utilise flexbox pour ma mise en page.
Svp j'ai ces 4 elements(header, section_one, section_two, section_three) j'aimerais supprimer tous les espaces verticaux qui les sépares, j'aimerais que tous ces éléments soient collés verticalement. Comment faire svp ? 
<!DOCTYPE html>

<html>
   <head>
       <!-- Metatags, links to Bootstrap and stylesheets -->
<title>LSL - Solution de logement</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="LSL - Solution de logement" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />

<!-- Bootstrap core CSS -->
   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
   <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
   <link href="style2.css" rel="stylesheet" type="text/css">
   </head>
<body>

   

   <div id="conteneur"
    <!-- Header -->
       <header class="conteneurheader">
   <nav class="menu" style="background-color: blue">
    <ul class="navul">
        <li class="navmenu"><a href="#">Menu</a></li>
        <li class="navlogo"><a href="#">LSL</a></li>
        <li class="navcontact"><a href="#">Contact</a></li>
    </ul>
   </nav>
   <div class="home" style="background-image: url('img/about-bg.jpg')"></div>
   </header>

   <!-- Section 1 -->
   <section class="section_one">
  <div class="div_one">
  <h2>LSL</h2>
  <p>LSL  Que vous soyez en recherche de votre future résidence prin</p>
  </div>
  <div class="div_two">ANALYSONS ENSEMBLE VOS ATTENTES</div>
   </section> 

<!-- Section 2 -->
   <section class="section_two">
  <div class="menu_two">
      <div class="services"><a href="#">Nos services</a></div>
      <div class="solutions"><a href="#">Nos solutions</a></div>
      <div class="projet"><a href="#">Mon projet</a></div>
  </div>
   </section> 

<!-- Section 3 -->
   <section class="section_three">
  <img src="img/blog-img-2.png" alt="" width="400px" height="350px">
  <img src="img/c.jpg" alt="" width="250px" height="350px">
   </section> 
   
   <footer style="background-color: blue">
  <div>
    <pre>LSP       ZAC des longs Courts
          14111 Louvigny
      </pre>
    </div>
    <div>
      <ul>
      <li><a href="#">Nos services</a></li>
      <li><a href="#">Nos services</a></li>
      <li><a href="#">Nos services</a></li>
    </ul>
    </div>
   </footer>
</div>

<!-- Bootstrap core JavaScript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>


body, conteneur{margin: 0}
header{margin-top: 0;}
.menu{height: 40px; background-color: blue}
.home, .section_one, .section_two, .section_three{height: 400px}
footer{height: 150px}

header{margin-top: 0px;}

.section_one{
  background-image: url('img/post-bg.jpg');
  border: 3px solid red;
}

.div_one{
  background-color: white;
  width: 500px;
  height: 320px;
  position: absolute;
  margin-left: 25%;
  margin-top: 40px;
  margin-bottom:40px;
  z-index: 10
}
.div_two{
  /* align-self: flex-end; */
  background-color: blue;
  border: 3px solid white;
  width: 400px;
  height: 20px;
  position: absolute;
  margin-left: 45%;
  margin-top: 380px;
  z-index: 10
}

.section_two{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border: 3px solid red;
}
.menu_two{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 100px;
  margin-top: 10px;
  z-index: 10
}
.services, .solutions, .projet
{ list-style-type:none;
  background-color: white;
  border-left-color: blue;
  border-left-style: solid;
  border-left-width: 4px;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  font-weight: bold;
}

.section_three{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.section_two{
  background-image: url('img/post-sample.jpg');
  border: 3px solid red;
}
.section_three{
  background-image: url('img/home-bg.jpg');
  border: 3px solid red;
}

.navul{list-style-type:none; margin: 0; padding: 0;}

.conteneur, .conteneurheader
{
display: flex;
flex-direction: column;
justify-content: center;}

.navul{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

footer{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid red;
}


Et j'ai ce rendu (j'ai mis les bordures en rouge juste pour pouvoir les distinguer et voir les espaces qu'il y a )
A voir également:

2 réponses

Réponse 1 / 2
nulenmathe Messages postés 425 Date d'inscription   Statut Membre Dernière intervention   152
 
.div_one{
background-color: white;
width: 500px;
height: 320px;
position: absolute;
margin-left: 25%;
margin-top: 40px;
margin-bottom:40px;
z-index: 10
}

Margin c'est un espace entre le bord de la balise (par ex div) et le bord de l'autre élément (une autre div les cotés le haut de la page)

Il suffit de mettre margin-top: 0; et ça enlève l'espace

Le Padding c'est la même chose mais vers l'intérieur
0
Anouchka2586 Messages postés 50 Date d'inscription   Statut Membre Dernière intervention   5
 
J'ai mis margin-top: 0; et ça ne change rien. Voici un bloc par exemple: 
 <!-- Section 1 -->
   <section class="section_one">
  <div class="div_one">
  <h2>LSL</h2>
  <p>LSL  Que vous soyez en recherche de votre future résidence prin</p>
  </div>
  <div class="div_two">ANALYSONS ENSEMBLE VOS ATTENTES</div>
   </section> 


.section_one{
  background-image: url('img/post-bg.jpg');
  background-color: rgba(0,0,255,0.3)
  border: 3px solid red;
  margin-top: 0;
}

.div_one{
  background-color: white;
  width: 500px;
  height: 320px;
  position: absolute;
  margin-left: 25%;
  margin-top: 40px;
  margin-bottom:40px;
  z-index: 10
}
.div_two{
  /* align-self: flex-end; */
  background-color: blue;
  border: 3px solid white;
  width: 400px;
  height: 20px;
  position: absolute;
  margin-left: 45%;
  margin-top: 380px;
  z-index: 10
}


Voici le rendu :
0
nulenmathe Messages postés 425 Date d'inscription   Statut Membre Dernière intervention   152
 
le .div_one était un exemple il faut le faire sur tout les bloc avec un margin top

Regarde avec F12 comment est agencé ton site et quelle balises se touche

En générale un vue graphique permet en mettant sa souris dessus de voir les propriété
0
Réponse 2 / 2
Anouchka2586 Messages postés 50 Date d'inscription   Statut Membre Dernière intervention   5
 
J'ai mis ça et ça ne change pas : 
header, .section_one, .section_two, .section_three, footer{margin-top: 0px;}
0
nulenmathe Messages postés 425 Date d'inscription   Statut Membre Dernière intervention   152
 
tu la mis au début ou a la fin du code ?

Car il lis le code de haut en bas donc il remplace les valeurs
0