Solved

CSS: Why is there a gap underneath my header?

Posted on 2016-10-26
4
29 Views
Last Modified: 2016-10-26
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
0
Comment
Question by:colinspurs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41860075
There is a gap irrespective of width -

The cause
The image on the right.
Images are by default inline elements which means that
<img src=" .... "  />
<span>some text here</span>

Open in new window

there is actually a space between the image and the text - which means when you make the image 100% wide the space drops to the next line.

To fix this - just make your img display: block - and the gap will go away.

something like this should do it
header img {
  display: block;
}

Open in new window

EDIT changed style to work off header
1
 
LVL 3

Author Comment

by:colinspurs
ID: 41860113
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.
0
 
LVL 3

Author Closing Comment

by:colinspurs
ID: 41860114
Thanks.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41860154
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
1

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question