28172 sujets

CSS et mise en forme, CSS3

Supprimer les espaces verticaux entre mes blocs

Bonjour
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>xxxxxxxxxxxxxxx</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="xxxxxxxxxxxxxxxx" />
<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="style.css" rel="stylesheet" type="text/css">
   </head>
<body>

   

    <!-- Header -->
       <header>
      <div class="container">
   <nav id="menu" class="col-md-12" style="background-color: blue"> </nav>

   <div class="col-md-12 home" style="background-image: url('img/about-bg.jpg')"></div>

   </div>
   </header>

   <div class="container">
   <!-- Section 1 -->
   <section id="section_one" style="background-image: url('img/post-bg.jpg')">
       <div class="row">
           <div class="col-md-12"></div>
       </div>
   </section> 

<!-- Section 2 -->
   <section id="section_two" style="background-image: url('img/contact-bg.jpg')">
       <div class="row">
           <div class="col-md-12"></div>
       </div>
   </section> 

<!-- Section 3 -->
   <section id="section_three" style="background-image: url('img/home-bg.jpg')">
       <div class="row">
           <div class="col-md-12"></div>
       </div>
   </section> 
   
   <footer style="background-color: blue">
  <div class="row">
             <div class="col-md-12"></div>
    </div>
   </footer>
</div>

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

</html>
Bonjour,
par défaut, si je ne m'abuse, les éléments HTML ?header? et ?div? sont de type bloc et donc s'empilent les uns au-dessus des autres. De ce fait, parler d'espaces verticaux n'a pas vraiment de sens.
À mon avis, dans le fichier ?styles.css? quelque chose a dû modifier ce comportement.
Mais comme vous ne le montrez pas…
Smiley smile
Au vu des classes il utilise Bootstrap, d'où cette séparation entre les blocs.
Je ne l'utilise pas personnellement, mais je sais qu'il y a des margin et des padding entre les sections/row/col.

Il faut explorer le code et surcharger les classes qui posent problème avec les valeurs de margin/padding adéquates.

Sinon là dans ce code, ils ne servent pas à grand chose. Il s'agit à chaque fois de row d'une seule colonne en full-width (la grille BS est à 12 col.), donc autant mettre une simple "<div>" avec une width à 100% à la place de faire de la grille. Au moins plus aucun problème.
Et puis le contenu par image je vois venir Smiley rolleyes ... attention. Mauvaise pratique pour absolument tout, le confort, le SEO, le responsive, et j'en passe.
Modifié par Nolan (05 Jul 2018 - 14:33)
Sujet clos
Aller à