CODEWITHSUNDEEP
css
Grey-lover
Grey-lover

Reputation: 633

Why is there gap above images?

I want to achieve this: enter image description here

I have achieved this:

enter image description here

I don't understand why is there gap above the button images? The page is live at http://shrineweb.in/other-files/clients/omypet/tellerest/index.html

Markup:

<section id="banner">
<nav> <a href="#"><img src="images/tellerest-homepage-design_09.png" alt=""></a><a href="#"><img src="images/tellerest-homepage-design_10.png" alt=""></a><a href="#"><img src="images/tellerest-homepage-design_11.png" alt=""></a><a href="#"><img src="images/tellerest-homepage-design_12.png" alt=""></a>
</nav>
</section>

CSS:

#banner { width: 950px; margin: 0 auto; text-align: center;}
#banner nav { margin: 0; padding: 0;}
#banner nav img { margin: 0; padding: 0;}

Upvotes: 0

Views: 82

Answers (4)

ralph.m
ralph.m

Reputation: 14345

You can use either of these to prevent this:

header img {display: block;}

header img {vertical-align:top;}

The gap is caused by the image's default vertical-align: baseline, which aligns it with the baseline of any text it might sit beside.

Upvotes: 0

ShibinRagh
ShibinRagh

Reputation: 6646

There is a float issue please add this code 

header img {
    display: block ;
}

Upvotes: 0

web-tiki
web-tiki

Reputation: 103780

The issue is created by the logo image. Images are inline elements so they have a white-space after them. To remove the white-space, you can display the image as a block element by adding this CSS :

header > img{
    display: block;
}

Upvotes: 2

miltos
miltos

Reputation: 1019

Change your header css and add same height as your image like this

header { width: 950px; height: 56px; margin: 0 auto; text-align: left;}

Upvotes: 0

Related Questions