Html 两个div之间的垂直距离

有人能帮我纠正我面临的问题吗。我试图在两个div之间设置一个空格，但这样做会将两个div移动到一起。我的代码如下：

@charset“utf-8”；
/*CSS文档*/
* {
框大小：边框框；
}
身体{
背景图片：url（../images/nature_beach-1280x800.jpg）；
背景重复：无重复；
背景大小：100%100%；
身高：100%；
保证金：0；
}
html{
身高：100%；
}
#容器{
背景色：rgba（255、255、255、50）；
身高：65%；
宽度：30%；
框大小：边框框；
转换：翻译（200%，20%）；
字体系列：Myriad Pro；
字体大小：20px；
}
#登录{
文本对齐：居中；
填充：5%；
字体大小：粗体；
}
#形式{
利润率最高：5%；
左边距：10%；
}
.textfield{
高度：25px；
宽度：250px；
背景色：rgba（109、207、246、50）；
边界：无；
}
.fieldname{
浮动：左；
}
.文本框{
浮动：对；
保证金权利：10%
}
#集装箱2{
/*我应该在这里放什么*/
}

登录
用户名
密码

元素的高度为零，因为浮动的div-one不会增加父元素的高度。
如果您想了解更多，请阅读clearfix

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

这里有更多信息。

---

如前所述，最好开始使用乙醚内联块或flexbox，以一劳永逸地避免这个问题

不确定预期的最终结果，也不确定您的方法：）

您可以对不同的值使用transform

这里的重点是什么？要对齐右侧图元和一些垂直对齐？问题不清楚此处翻译的目的：）

@charset“utf-8”；
/*CSS文档*/
* {
框大小：边框框；
}
身体{
背景图片：url（../images/nature_beach-1280x800.jpg）；
背景重复：无重复；
背景大小：100%100%；
身高：100%；
保证金：0；
}
html{
身高：100%；
}
#集装箱#集装箱2{
背景色：rgba（255、255、255、50）；
身高：65%；
宽度：30%；
框大小：边框框；
转换：翻译（200%，20%）；
字体系列：Myriad Pro；
字体大小：20px；
}
#登录{
文本对齐：居中；
填充：5%；
字体大小：粗体；
}
#形式{
利润率最高：5%；
左边距：10%；
}
.textfield{
高度：25px；
宽度：250px；
背景色：rgba（109、207、246、50）；
边界：无；
}
.fieldname{
浮动：左；
}
.文本框{
浮动：对；
保证金权利：10%
}
#集装箱2{
/*我应该在这里放什么*/
转换：翻译（200%，40%）；
}

登录
用户名
密码

首先，这里有一个语法错误：

*{
    box-sizing:border box;
}

它是边框框

然后我稍微改变一下您的结构，将

span

替换为

div

，就在这里：

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

---

只需添加以下样式：

#container1 {
  margin-bottom: 18px;
  overflow: auto;
  width: 380px;
}
#container2 {
  overflow: auto;
  width: 380px;
}

---

不相关，但这种转变有什么意义？为什么要使用

translate（）

进行定位，而不是使用内置的CSS规则进行定位？请尝试

padding top:60px50及以上应有效是的…有效！！谢谢你，普加什。有人能解释一下为什么边距顶部不起作用吗？因为您使用浮动和平移来定位元素。通过执行此操作，容器2的高度为0。请以正常方式定位元素以避免此类冲突。明白了。非常感谢您的快速回答。您真的建议使用“变换”在高度为0的元素上获得边距吗？这很糟糕practise@Laurens我的意思是，首先，转换的东西是不准确的，这里要使用另一种聪明的方法。只是看起来初学者会绝对定位…所以，我认为它转换一般都是不好的做法？？但是我如何避免div的浮动，因为我需要它们在一行中？？？@user3889963不，除非你知道为什么要使用它，这里有什么意义？要对齐右侧图元和一些垂直对齐？问题不清楚此处翻译的目的：）@user3889963使用百分比值填充顶部或底部，使用宽度作为参考来计算距离。。。垂直边距也是如此
#container1 {
  margin-bottom: 18px;
  overflow: auto;
  width: 380px;
}
#container2 {
  overflow: auto;
  width: 380px;
}