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;

}