Question 379014 in Html Question posted in
Some basic documentation can be found here.

Html – How can I separate two items vertically without affecting the height of the first one

as the title states, I would like to separate the logoSlogan and the stats div vertically, however, if I put some margin in between them, it moves the both of them. Is there any clue on how I could make some "space" in between them so they’re not clustered?

body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', Arial, sans-serif;
  background: linear-gradient(90.6deg, rgb(59, 158, 255) -1.2%, rgb(246, 135, 255) 91.6%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoSlogan {
  text-align: center;
  color: white;
}

.stats {
  text-align: center;
  color: white;
}
<body>

  <div class="content">
    <div class="logoSlogan">
      <img src="media/CL_Logo_Blue_Hex/CL_Logo_HD_White.png" class="CL_Logo">
      <h1>Amogus</h1>
      <p>This is a simple landing page with a gradient background.</p>
    </div>

    <div class="stats aos-init aos-animate" data-aos="fade-up">
      <h1> Check out these cool stats!</h1>
      <p> Total Videogames: 100.000 </p>
      <p> Total Critics: 100 </p>
      <p> Total Critiques: 5.000 </p>
    </div>
  </div>

</body>
Tags:

2

Answers


  1. 0

    Add this CSS to your style

    .content {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
    Login or Signup to reply.
  2. 0

    use justify content: space-between, space-around or space-evenly to put automatic spacing between the flex items, or use gap:100px to get fixed spacing

    body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', Arial, sans-serif;
  background: linear-gradient(90.6deg, rgb(59, 158, 255) -1.2%, rgb(246, 135, 255) 91.6%);
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction:column;
min-height:700px;
}



.logoSlogan {
  text-align: center;
  color: white;
}

.stats {
  text-align: center;
  color: white;
}
    <body>


    <div class="logoSlogan">
      <img src="media/CL_Logo_Blue_Hex/CL_Logo_HD_White.png" class="CL_Logo">
      <h1>Amogus</h1>
      <p>This is a simple landing page with a gradient background.</p>
    </div>

    <div class="stats aos-init aos-animate" data-aos="fade-up">
      <h1> Check out these cool stats!</h1>
      <p> Total Videogames: 100.000 </p>
      <p> Total Critics: 100 </p>
      <p> Total Critiques: 5.000 </p>
    </div>


</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search