Solved

CSS: Why is there a gap underneath my header?

Posted on 2016-10-26
4
17 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
  • 2
  • 2
4 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now