Question

I am trying to line this bottom shadow up as in the top shadow but I cannot seem to get the firgured out. The only time it collapses is when I remove the line-height or font-size much further down in the css file using Developer Toolbars but of course this affects everything else too. Here’s my basic html structure:

<div class="banner-image">
  <div class="banner-image-wrapper">
    <div class="shadow-top"></div>
      <a class="header-image">
        <img />
      </a>
    <div class="shadow-bottom"></div>
  </div>
</div>

On the tag, if I remove the font-size and line-height, everything collapses nicely on itself but I cannot seem to force this just on the tag.

I know this is going to be a ridiculous issue once it’s been solved.

Thanks!

Answer 1

The answer is actually pretty simple, you just need to use some clever positioning & take advantage of the parent’s box-model:

.banner-image{
    position:relative;
}

.shadow-bottom{
    position:absolute;
    height: x;
    bottom: -x;
}

Here’s the formula you need:

• Take the height of the bottom shadow ( some value x )
• Then make sure the parent of that element has a position of ‘relative’ (~important~)
• Make the position of the bottom shadow ‘absolute’
• Position it at the bottom minus the value of it’s height ( -x )

Here’s a jsFiddle illustrating the effect: http://jsfiddle.net/k7CmJ/