Solved

CSS: Why is there a gap underneath my header?

Posted on 2016-10-26
4
27 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 55

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 55

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS issue 8 40
CSS: How do I override in-line styling 11 25
Change box shadow 1 29
Remove Space when printing webpage - Setup in Print.css 3 12
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

839 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