How to get rid of space between navbar and picture?

Question

I can't figure out how to remove this space from my navbar and the picture..

The CSS code I have for the navbar and the image is:

a {
    text-decoration: none;
    color: white;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 0;
}

a:hover {
    color: black;
}

header {
    background-color: #C0C0C0;
    margin: 3px 60px 0;
}

li {
    display: inline;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

nav {
    position: relative;
    text-align: center;
}

ul {
    list-style-type: none;
}

#bikebanner {
    position: relative;
    left: 65px;
}

#bikebanner is the image id.

And the html goes like so:

<header>
    <img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
    <h1 id="pagetitle"><a href="Lab04.html">Cycling Tours</a></h1>
    <nav>
        <ul>
            <li><a href="aboutUs.html">About Us</a></li>
            <li><a href="#askUs">Ask Us</a></li>
            <li><a href="#destinations">Destinations</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#reviews">Reviews</a></li>
            <li><a href="#seminars">Seminars</a></li>
            <li><a href="#tripPrep">Trip Prep</a></li>
        </ul>
    </nav>
</header>

Looking for a universal fit as I have other things with white space between them as well.

Thanks.

score 5 · Accepted Answer · answered Feb 19 '17 at 15:34

5

Try adding this to your css:

img{
 display:block;
}

img is of type inline-block which adds a little space which is hard to find.

setting it to block should fix it.

answered Feb 19 '17 at 15:34

Shtut

1,397
2
14
28

Thanks, no space now! – Zettsyuk Feb 19 '17 at 15:48

score 3 · Answer 2 · answered Feb 19 '17 at 15:31

3

what space you are talking about ?

Keep in mind h1 by default has white space around it

answered Feb 19 '17 at 15:31

Coffee coder

162
1
1
9

I want the nav to appear directly under the image, so the border touches it. – Zettsyuk Feb 19 '17 at 15:43
@Zettsyuk remove padding and margin from h1 should work – Coffee coder Feb 19 '17 at 15:45
I guess I should update the image more.. There's a title overtop of the image higher up, didn't have anything to do with it though. I'll edit it. – Zettsyuk Feb 19 '17 at 15:53

I'm Joe Too · Answer 3 · 2017-02-19T15:53:47.410

This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.

Nav Items

There are two popular solutions:

Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).

So my CSS would look something like this:

ul {
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  font-size: 1rem;
}

Images

If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:

header img {
  display: block;
  margin: 0 auto;
}

I should've been more clear. I see it gets rid of the space between each selection, but I meant the space on the bottom of the image, above the nav bar. Thanks though, it makes it look cleaner so I guess you helped my future self out. :) — Zettsyuk, Feb 19 '17 at 15:48
The image thing makes people crazy too - same idea. I'll update my answer so hang tight one second. — I'm Joe Too, Feb 19 '17 at 15:49

score 1 · Answer 4 · answered Feb 19 '17 at 15:42

1

every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.

h1 {
  margin: 0;
  padding: 0;
}

look at this jsfiddle https://jsfiddle.net/zn7wtdLp/

answered Feb 19 '17 at 15:42

mtizziani

956
10
23

score 0 · Answer 5 · answered Feb 19 '17 at 15:34

0

The problem is display:inline. This treats the elements like text, so if you have

<li>...</li>
<li>...</li>

you have the problem you mentioned, because the linebreaks cause a space. Try to put your list elements like this:

<li>...</li><li>...</li>

For other solutions see here

answered Feb 19 '17 at 15:34

Carle B. Navy

1,156
10
28

Again, my fault for not being clearer! But this helps me in the future! Thanks! – Zettsyuk Feb 19 '17 at 15:49

How to get rid of space between navbar and picture?

5 Answers5

Nav Items

Images