Solved

CSS: Why is there a gap underneath my header?

Posted on 2016-10-26
4
25 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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 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

15 Experts available now in Live!

Get 1:1 Help Now