Add space over and under footer

I have googled and tried every code I have found and it hasnt work.
I need space between my content and footer. Im working with a localhost so cant give a link. But this is a picture how it looks now:
https://tinypic.com/r/rcsi10/8

I need it to look like this:

https://tinypic.com/r/hriwic/8

CSS

#page {
  background: white;
  width: 1020px;
  margin: 10px auto;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.site-footer {
  clear: both;
  padding: 40px 40px;
  color: #000;
text-align: center;
background: #fff;
padding: 10px;

font-size: 11px;
margin-top: 15px;
}

#spacer {
height: 20px;
width: 1020px;
margin-top: 15px;

}

HTML

<div id="main" class="site-main">
<div id="spacer">
<footer id="colophon" class="site-footer" role="contentinfo">
</div>