CSS box-shadow appears only with margin

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 margin-bottom to the header - but that renders the whole exercise moot.

This is the code:

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

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

<!-- language: lang-html -->

<div id="header"></div>
<div id="rev">the slider</div>

<!-- end snippet -->

Could someone help me figure out what's causing this?

See the following questions:

• Does css border-shadow add to an element's size
• Is css box-shadow part of element's box model?

According to the box-shadow spec:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only

So if you don't want overlap, you'll have to add the margin youself

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

#header {
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
  margin-bottom: 10px;
}
#slider {
  position: relative;
}

<!-- language: lang-html -->

<div id="header">Header</div>
<div id="slider">Slider</div>

<!-- end snippet -->