?
Solved

CSS: Why is there a gap underneath my header?

Posted on 2016-10-26
4
Medium Priority
?
30 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 58

Accepted Solution

by:
Julian Hansen earned 2000 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 58

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month12 days, 2 hours left to enroll

752 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