Why can't I get rid of the space below this image?

Question

I've been working on this for the past few hours and I give up. I cannot figure this one out.

I have an image (header logo), followed by a nav bar. There is a 2-3px space just below the image. I've systematically eliminated every bit of externally referenced CSS, and then added some inline CSS to try and fix the problem. Here's what I have right now:

<html lang='en'>
        <head>
            <meta charset='utf-8' />
            <title>Sci-fi's Big Mistake</title>
        </head>

        <body style='margin:0px; padding:0px; border:1px solid green;'>


            <img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
            <span style='border:1px solid blue;margin:0px; padding:0px; '>text</span>
            <ul id='menu' class='gold' style='margin:0px; padding:0px; border:1px solid red;'>
                <li><a href='#'>Home</a></li>
                <li class='active'><a href='#'>About</a></li>
                <li><a href='#'>Services</a></li>
                <li><a href='#'>Products</a></li>
                <li><a href='#'>Contact</a></li>
                </ul>




Shouldn't have cancelled this.
</body></html>

Here's a screenshot of the page, and what I'm seeing on my system (Win, xp, same in IE8 as well as FF 13)

http://picturepush.com/public/8737985

Is there any external style sheets? – Anagio Jul 16 '12 at 03:29 — Anagio, Jul 16 '12 at 03:29

score 2 · Accepted Answer · edited Jul 17 '12 at 13:37

2

There you got it.

http://jsfiddle.net/dennym/XBdfk/

Removed the <br> and added a display:block to your image. The space is gone.

The Problem was the <br> it has a min margin which u cant remove... i guess. Also you have to add a display:block to your image, so the text appears at the bottom.

(Also removed a little error in your quotation marks)

edited Jul 17 '12 at 13:37

My Head Hurts

37,315
16
75
117

answered Jul 16 '12 at 13:54

Denny Mueller

3,505
5
36
67

score 1 · Answer 2 · answered Jul 16 '12 at 03:53

1

The image tag code is not correct you didn't close the alt attribute so the styles aren't taking affect and you should be using double quotes

<img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>

You also may want to remove the <br> and set display:block; on the image

answered Jul 16 '12 at 03:53

Anagio

3,005
9
44
81

That may be a type-o in copying over. It's a development (aka private to the world) site, but I will post up the code (same as above, but i'll remove the actual client content & text first, like above). – a coder Jul 16 '12 at 05:27
Confirmed that the missing quote is actually there on the live site. I've never seen where using double quotes causes random spacing. I use singles so I can double quote the variable in PHP that holds all of this HTML, then echo to the screen. I prefer embedding variables in the double quotes as opposed to having to 'break' . $up . 'content' with single quotes. – a coder Jul 16 '12 at 05:30

score 0 · Answer 3 · answered Jul 16 '12 at 03:25

There is no gap for me using Mac OS X/Chrome. My guess would be that your browser is setting a line-height on the span other than 1.

Try using a reset stylesheet, http://meyerweb.com/eric/tools/css/reset/. Also Firebug will easily allow you to hover over elements to see what sizes elements to pin-point where the padding is coming from.

score 0 · Answer 4 · edited Feb 13 '14 at 11:38

If understand you correctly, the problem is caused by the fact that images are not only inline elements like text, but are also considered to be 'text'. Text is written with a baseline. Most letters align on this baseline, but some, like j, g and y not. So some pixels of space are included at the bottom, below the baseline when a text is rendered. You can put this off by adding

line-height:0px;

to your image tag.

Another bizarre result of this image-equals-letter idea is that images that should be aligned side by side show a gap. Indeed: there are spaces between letters! You can solve this by adding to that sme image tag:

font-size:0px;

Another way to solve that problem you mention would be to make that header image the background image of a div with the same dimensions. Div's are only containers and have no font-like properties.

Hope this helps!

Why can't I get rid of the space below this image?

4 Answers4