Html 如何使用css添加div标记的底部间距

这是我想给你们看的例子。我有一个div标签，ID为“代码>窗体气泡< /代码>在容器的中间。我添加了一个

边距：20px自动到
表单气泡
。但泡沫的形状在底部没有任何空间。我不知道如何在底部创造空间。我很确定我可以为
容器
创建一个
填充底部
，但我想看看是否有其他方法可以做到这一点

HTML

您必须添加
填充底部：20px到
#容器
。然后您可以从
#表单气泡中删除边距

为什么？因为在
#下面没有任何东西可以“移动”形成气泡。你看到的是你身体的灰色背景。因此，您必须扩大容器的高度


正文{
保证金：0；
填充：0；
背景：灰色；
字体系列：无衬线；
}
#容器{
保证金：自动；
最大宽度：1170px；
最小宽度：960像素；
背景：白色；
垫底：20px；
}
#项目名称{
文本对齐：居中；
边际上限：0；
填充顶部：20px；
}
#形成泡沫{
背景:#3399ff；
填充物：5px；
宽度：189px；
显示：块；
边界半径：3px；
保证金：0自动；
}

添加属性
您可以在这里通过
溢出：隐藏激活tohold（通常用于处理浮动）


正文{
保证金：0；
填充：0；
背景：灰色；
字体系列：无衬线；
}
#容器{
保证金：自动；
最大宽度：1170px；
最小宽度：960像素；
背景：白色；
溢出：隐藏；/*BFC*/
}
#项目名称{
文本对齐：居中；
边际上限：0；
填充顶部：20px；
}
#形成泡沫{
背景:#3399ff；
填充物：5px；
宽度：189px；
显示：块；
边界半径：3px；
保证金：20px自动；
}

添加属性
试试这个：


正文{
保证金：0；
填充：0；
背景：灰色；
字体系列：无衬线；
}
#容器{
保证金：自动；
最大宽度：1170px；
最小宽度：960像素；
背景：白色；
}
#项目名称{
文本对齐：居中；
边际上限：0；
填充顶部：20px；
}
#形成泡沫{
背景:#3399ff；
填充物：5px；
宽度：189px；
显示：块；
边界半径：3px；
边缘底部：20px；
}
<div id="container">
    <h1 id="project-title">Add Properties</h1>
    <div id="form-bubble">
     <input type="text" placeholder="this is text">
      <!--</form>-->
      </div>
  </div><!-- container -->

body{
  margin:0;
  padding:0;
  background:grey;
  font-family:sans-serif;
}

#container{
margin:auto;

max-width:1170px;
min-width:960px;
background:white;
}

#project-title{
text-align:center;
margin-top:0;
padding-top:20px;

}

#form-bubble{
background:#3399ff;
padding:5px;
width:189px;
display:block;
border-radius: 3px;
margin:20px auto;

}