Div 尝试增加高度时无效。帮助表示赞赏

Question

感谢您的光临。我是 CSS 新手，我有一个问题 - 我的容器 div 高度根本没有增加。我想在上部文本和按钮之间添加一些间距，但这是不可能的。添加像素对容器没有任何作用 div。我试图改变位置和显示，但我不知道我在做什么。你会这么好心帮我吗？谢谢。

* {
          padding: 0;
          margin: 0;
          font-family: 'Open Sans', sans-serif;
          box-sizing:border-box;
          
        }
    
        body {
          background-color: #3b5998;
        }
        
    
        .form_style {
          margin-bottom: 1em;
         
        }
    
        #container {
          display: block;
          max-height: 500px; 
          max-width: 350px;
          margin: 0 auto;
          box-shadow: 0 0 3px grey;
          background-color: white;
          
        }
    
        #form_wrap {
          margin-top: 60px;
          display: block;
          position: relative;
          background-color: white;
          text-align: center;
          
        }
    
        #space {
        margin-bottom: 10em;
      }
    
        #container #form_wrap .form_style input {
          display: inline-block;
          border-radius: 0.3em;
          padding: 10px;
          width: 90%;
        }
    
        #container #form_wrap .form_style label {
          font-style: italic;
          display: block;
          margin-left: 1.1em;
          text-align: left;
          
        }
    
        #upper-text {
          margin-bottom: 1em;
          margin-top: 30px;
          text-align: center;
          font-style: italic;
          font-weight: lighter;
    
        }
    
        #container .btn button {
          border-radius: 0.3em;
          color: white;
          padding: 5px;
          width: 90%;
          height: 35px;
          margin: 0 20px;
          background-color:lightgreen;
          font-weight: bolder;
        }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script type="text/javascript" src="./js.js"></script>
      <title>Form</title>
      
    </head>
    <body>
      <div id="space"></div>
      <div id="container">
      <div id="upper-text">
        <h1>I dare you to Sign Up</h1>
        <p>It's free * </p>
      </div>
      <div id="form_wrap">
    <div class="form_style">
      <label>First Name</label><br>
      <input type="text" placeholder="Filip">
    </div>
    <div class="form_style">
      <label>Last Name</label><br>
      <input type="text" placeholder="Nakrętka">
    </div>
    <div class="form_style">
      <label>Email</label><br>
      <input type="email" placeholder="filipnak@piesek.pl">
    </div>
    <div class="form_style">
    <label>Email Again</label><br>
    <input name="email" type="text" id="confemail" placeholder="filipnak@piesek.pl">
    </div>
    <div class="form_style">
      <label>Password</label><br>
      <input name="password" type="password" id="pass">
      </div>
    <div class="btn">
    <button type="submit">Sign Up</button>
    </div>
    </div>
    </div>
    
    </body>
    </html>

Answer 1

我已将#container 高度添加到 90vh，并添加了一些填充。 #上文

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./js.js"></script>
  <title>Form</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font-family: 'Open Sans', sans-serif;
      box-sizing:border-box;
      
    }

    body {
      background-color: #3b5998;
      height: 100%;
    }
    
    

    .form_style {
      margin-bottom: 1em;
     
    }

    #container {
      display: block;
      height: 90vh; 
      max-width: 350px;
      margin: 0 auto;
      box-shadow: 0 0 3px grey;
      background-color: white;
      
    }

    #form_wrap {
      margin-top: 60px;
      display: block;
      position: relative;
      background-color: white;
      text-align: center;
      
    }

<!--     #space { -->
<!--     margin-bottom: 10rem; -->
<!--   } -->

    #container #form_wrap .form_style input {
      display: inline-block;
      border-radius: 0.3em;
      padding: 10px;
      width: 90%;
    }

    #container #form_wrap .form_style label {
      font-style: italic;
      display: block;
      margin-left: 1.1em;
      text-align: left;
      
    }

    #upper-text {
      padding-top: 20px;
      margin-bottom: 1em;
      margin-top: 30px;
      text-align: center;
      font-style: italic;
      font-weight: lighter;

    }

    #container .btn button {
      border-radius: 0.3em;
      color: white;
      padding: 5px;
      width: 90%;
      height: 35px;
      margin: 0 20px;
      background-color:lightgreen;
      font-weight: bolder;
    }
    
    .free {
      padding-top: 20px
    }

  </style>
</head>
<body>
  <div id="space"></div>
  <div id="container">
  <div id="upper-text">
    <h1>I dare you to Sign Up</h1>
    <p class="free">It's free * </p>
  </div>
  <div id="form_wrap">
<div class="form_style">
  <label>First Name</label><br>
  <input type="text" placeholder="Filip">
</div>
<div class="form_style">
  <label>Last Name</label><br>
  <input type="text" placeholder="Nakrętka">
</div>
<div class="form_style">
  <label>Email</label><br>
  <input type="email" placeholder="filipnak@piesek.pl">
</div>
<div class="form_style">
<label>Email Again</label><br>
<input name="email" type="text" id="confemail" placeholder="filipnak@piesek.pl">
</div>
<div class="form_style">
  <label>Password</label><br>
  <input name="password" type="password" id="pass">
  </div>
<div class="btn">
<button type="submit">Sign Up</button>
</div>
</div>
</div>

</body>
</html>

请查看运行片段。

Div 尝试增加高度时无效。帮助表示赞赏

Div height is not working when trying to increase it. Help appreciated

html

css

height