如何在不影响第一个项目高度的情况下垂直分离两个项目

问题描述 投票:0回答:1

如标题所述,我想将

logoSlogan
stats
div 垂直分开,但是,如果我在它们之间放置一些边距,则会移动它们。有什么线索可以告诉我如何在它们之间留出一些“空间”,这样它们就不会聚集在一起吗?

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>

html css
1个回答
0
投票

将此 CSS 添加到您的样式中

.content {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
© www.soinside.com 2019 - 2024. All rights reserved.