尝试在弹性盒中制作更小的条形

Question

我想让弹性项目周围的空白变小。这本质上是一个带有子弹性盒的父弹性盒。

这是我的html：

 <div class="parent-box">
    
         <div class="contain">
      <div class="modal">
        <h2>Plans For The Site</h2>
           <p><span class="date">~12-03-24 00:57~</span><br><span class=body>so, in order, i want to get this little blog thing working and looking the way i want, create the gifs and pictures for the background and buttons, create a font and add it, add some little music effects to everything, add some content to the different pages, add a little gir cursor, and then i think ill put the link up on my socials. once i get to the point of putting it up on my socials, ill subscirbe and get a domain name that i like... before that im just gonna keep working on the free subscription unless i run out of space. eta with the way im working looks to be about a week- 3 weeks, esp with the clothing im working on.</span>
      </div>
   </div>
      <div class="contain">
      <div class="modal">
        <h2>Plans For The Site</h2>
           <p><span class="date">~11-03-24 01:38~</span><br><span class=body>Just got the website front page done superficially, need to create the gifs and pictures and background, and need to figure out how to format this blog better than it is atm... make take a day or so... going to bed right now though</span></p>
      </div>
      </div>

    </div>

这是CSS：

.contain {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 50vw;
  height: 50%;
  margin:30px;
  padding: 1rem;
  background-color: aqua;
  border: 1px solid black;
  border-top: 15px solid black;
  color: black;
  overflow: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

 .parent-box {
        display: flex;
        width: 70%;
        height: 50vh;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:10px;
        margin-top:10px;
        overflow: scroll;
        overflow-x: hidden;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        font-size: 30px;
        text-align: center;
        background-color: #7d7d7d;
        color: #000000;
        font-weight: bold;
}
  

我尝试过在所有三种CSS样式中使用边距，但它似乎没有任何作用。我只是想让顶部的灰色空间更小并且响应更快。

Answer 1

花了我一段时间，但我自己弄清楚了，我需要将我的值从百分比更改为在子框中查看高度。然后我添加了边距以便能够自己控制空间。

.modal {
  width: 50vw;
  height: 30vh; <<!-- referring to this property -->
  margin:20px auto 20px auto; <<-- add this to control the space yourself-->
  padding: 1rem;
  background-color: aqua;
  border: 1px solid black;
  border-top: 15px solid black;
  border-radius: 10px;
  color: black;
  overflow: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

这应该可以解决任何想要做同样事情的人的问题。