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?

possible duplicate of [Is css box-shadow part of element's box model?](http://stackoverflow.com/questions/7036498/is-css-box-shadow-part-of-elements-box-model) — KyleMit, Mar 26 '15 at 15:59

score 10 · Answer 1 · edited May 23 '17 at 12:23

10

See the following questions:

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>

edited May 23 '17 at 12:23

Community

1
1

answered Mar 26 '15 at 15:48

KyleMit

30,350
66
462
664

Thanks, KyleMit! The trouble is that once I set the slider div to `display:none`, the shadow appears without the need to add any margin anywhere. What property of the slider could be impeding the shadow of the header, any idea? – zkvvoob Mar 26 '15 at 16:53
@zkvvoob, I'm not quite sure I understand your issue. Can you update your question with a screenshot of what's actually happening and what you'd like to happen. If it was just that you didn't need the `margin-bottom` when the slider was set to `display:none`, you could add a `margin-top` to the slider instead. – KyleMit Mar 26 '15 at 17:19
I managed to figure it out. See my answer at the bottom. Sorry for the troubles! – zkvvoob Mar 26 '15 at 17:24

score 6 · Accepted Answer · answered Mar 26 '15 at 17:23

6

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!

answered Mar 26 '15 at 17:23

zkvvoob

394
1
4
26

2

Can you explain what z-index properties you changed to achieve the desired result? – Doug Wilhelm Feb 08 '19 at 22:49

Nima · Answer 3 · 2015-03-26T16:28:03.877

If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:

box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);

This will make the box-shadow appear only at the bottom.

Working example:

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

score 1 · Answer 4 · answered Mar 26 '15 at 15:47

When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible. If you want to display your box shadow inside the header, just add the keyword inset to your declaration.

CSS box-shadow appears only with margin

4 Answers4