I have a sticky header with a white background. The page background is also white. I'd like to set the header off from the content as the user scrolls down the page, so I gave the header some padding and a 1 pixel light gray bottom border. But I'd like to allow a 10px or so white strip below the gray, so the content doesn't look so chopped off. Looking at the box model in the firebug layout tab suggests that defining a 10px bottom margin would do it for me, but that has no effect. (I'm developing on my local machine with the free Catch Evolution wordpress theme and so far have looked at my results in both Chrome and Firefox 38. No difference with the border issue between the two.)
I read about multiple borders with :before and :after here but I don't think that will help me since I'm using fixed position.
Use two divs instead. (Remember to set the height of the first one)
<div style="position: fixed;">
<div id="content" style="height: 90%; position: relative; border-bottom: 1px solid gray;">
Your header
</div>
</div>