See the following questions: 

* [Does css border-shadow add to an element's size][1]
* [Is css box-shadow part of element's box model?][2]

According to the [box-shadow spec][3]:

> 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>



[1]: https://stackoverflow.com/q/9620027/1366033
[2]: https://stackoverflow.com/q/7036498/1366033
[3]: http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow

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?