两格之间的垂直距离

Question

有人可以帮助纠正我面临的问题吗？我正在尝试在两个div之间设置一个空格，但是这样做会使两个div一起移动。我的代码如下：

@charset "utf-8";

/* CSS Document */

* {
  box-sizing: border box;
}
body {
  background-image: url(../images/nature_beach-1280x800.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}
html {
  height: 100%;
}
#container {
  background-color: rgba(255, 255, 255, .50);
  height: 65%;
  width: 30%;
  box-sizing: border-box;
  transform: translate(200%, 20%);
  font-family: Myriad Pro;
  font-size: 20px;
}
#login {
  text-align: center;
  padding: 5%;
  font-weight: bold;
}
#form {
  margin-top: 5%;
  margin-left: 10%;
}
.textfield {
  height: 25px;
  width: 250px;
  background-color: rgba(109, 207, 246, .50);
  border: none;
}
.fieldname {
  float: left;
}
.textbox {
  float: right;
  margin-right: 10%
}
#container2 {
  /*What should I put here??*/
}

<div id="container">
  <div id="login">
    Login
  </div>
  <div id="form">
    <div id="container1">
      <span class="fieldname">Username</span>
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
    <div id="container2">
      <span class="fieldname">Password</span> 
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
  </div>
</div>

当我在CSS中将container-top2设置margin-top：5％时，两个div都根据保证金移动。我想做的是两个div之间的可变空间。填充到container2会使布局混乱。

请帮帮我。

演示链接

Answer 1

https://jsfiddle.net/y30tosp5/ 您的元素高度为零，cos浮动div元素不会增加父级的高度。
如果您想了解更多信息，请阅读有关clearfix的信息。

#container1{
    overflow: auto
}
#container2{
     margin-top: 2%;
     overflow: auto
}

什么是clearfix？这是更多信息。
如前所述，最好开始使用ether inline-block或flexbox，以避免一劳永逸。