如何用css添加div标签的底部间距

Question

Here是我要向您展示的示例。我在容器中间有一个id为form-bubble的div标签。我在margin:20px auto;添加了form-bubble。但形式泡沫并没有在底部获得任何空间。我不知道如何在底部创造空间。我很确定我可以为padding-bottom创建一个container，但我想知道是否还有另一种方法可以做到。{/ p>

HTML

<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 -->

CSS

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;

}

Answer 1

您可以通过overflow:hidden;

激活Block Formating Context以暂停collapsing margins （通常用于处理浮动）

＆＃13;

＆＃13;

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

#container {
  margin: auto;
  max-width: 1170px;
  min-width: 960px;
  background: white;
  overflow:hidden;/* BFC */
}

#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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/e7tn8grv/2/

在父容器中保留边距的最常用方法。

要保持容器内的边距（再次看到折叠边距），您还可以添加填充或边框（下面的片段，第三个是defaut行为，您可以注意到为html＆amp; body设置不同的背景颜色：

填充治疗

＆＃13;

＆＃13;

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

#container {
  margin: auto;
  max-width: 1170px;
  min-width: 960px;
  background: white;
  padding-bottom:1px;
}

#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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

保证金治愈

＆＃13;

＆＃13;

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

#container {
  margin: auto;
  max-width: 1170px;
  min-width: 960px;
  background: white;
  border-bottom:1px solid transparent;
}

#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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

使用不同的背景颜色可以注意到的defaut行为（仍然将边框应用于身体以保持子边距）

＆＃13;

＆＃13;

html {
  background:yellow;
  }
body {
  margin: 0;
  padding: 1px;/* hold collapsing margins here */
  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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

您必须将padding-bottom: 20px;添加到#container。然后你可以从#form-bubble中删除边距。
为什么？因为#form-bubble以下“移动”没有任何内容。你看到的是你身体的灰色背景。所以你必须扩大容器的高度。

body {
  margin: 0;
  padding: 0;
  background: grey;
  font-family: sans-serif;
}
#container {
  margin: auto;
  max-width: 1170px;
  min-width: 960px;
  background: white;
  padding-bottom: 20px;
}
#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: 0 auto;
}

<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 -->

Answer 3

试试这个：

  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-bottom:20px;

}