black_yurizan black_yurizan - 4 months ago 7
HTML Question

how to add bottom spacing of a div tag with css

Here is my example I want to show you. I have a div tag with the id of

form-bubble
in the middle of the container. I added a
margin:20px auto;
to the
form-bubble
. But the form-bubble is not getting any space at the bottom. I don't know how to create space at the bottom. I'm pretty sure that I can create a
padding-bottom
for the
container
, but I want to see if there is another way to do it.

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

you may activate the Block Formating Context to hold collapsing margins (usually used to deal with float) , here via overflow:hidden;

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

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