CSS box-shadow appears only with margin

Question

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:

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

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

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

Answer 1

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

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

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

Answer 2

Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.

Anyway, thank you all for your time and help!