asked on 10/26/2016

CSS: Why is there a gap underneath my header?

OK, another CSS headache for me. I need to understand why there is a small gap between the header and the pink background text (when the screen is > 800px wide).

When it is narrower, I rejig the header to use another image for AC Wilgar, and this produces a gap top and bottom of that image. Why?

Another thing, when I inspect the <a> for the Wilgar ad, it indicates it is only a fraction of the height of the image, but the link works over the whole image.

I have tested in Edge and the latest Chrome.

Here's the jsfiddle: https://jsfiddle.net/jc4m4smb/

Thanks for looking.

Col

CSS

Last Comment

Julian Hansen

10/26/2016

ASKER CERTIFIED SOLUTION

Julian Hansen

10/26/2016

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Colin Brazier

10/26/2016

ASKER

Perfect again Julian - cheers.

I had read this hack to get rid of white space between inline-block elements

font-size: 0; /* hack to prevent white space between inline-block divs. */

but this obviously didn't work here.

Colin Brazier

10/26/2016

ASKER

Thanks.

Julian Hansen

10/26/2016

You are welcome.

font-size: 0 also can work so does making the next element in the code on the same line as the image i.e.

<img ... ><span>. ..</span

Open in new window

Or even

<img ...><
span>...</span>

Open in new window

Personally I prefer display: block