title: CSS box-shadow appears only with margin
body: <p>So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add <code>margin-bottom</code> to the header - but that renders the whole exercise moot.</p>
  
  <p>This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    display:block;
    min-height: 99px;
    background: #FFFFFF;
    border-top: 3px solid #8dddcd;
    border-bottom: 1px solid #ecf0f1;
    line-height: 99px;
    box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
  }
  #rev {
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="rev"&gt;the slider&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could someone help me figure out what's causing this?</p>