CSS: what could be putting space between img and text, except margin and padding?

Question

I have code like the following:

<div style="width: 145px;"><a href="#" style="text-decoration:none;color:black">
<img src="/images/eh-145x20.png" alt="cloud hosting" 
style="margin: 0px;" title="cloud hosting" />
<div style="text-align: center; color: black; font-family: Verdana, Arial, sans-serif; width: 145px; 
margin: 0px; padding: 0px; line-height: 9px; font-size: 9px; text-shadow: gray 0.1em 0.1em 0.2em;">
<nobr>My text here</nobr></div>
</a></div>

If I use the code in jsFiddle, there is no space between the image and the text.

If I use the code on my existing site (sorry, can't link to it as it's behind a password) some inherited property - I don't know what - is inserting space between the two.

I've looked at the Computed Style of both the image and the text, and all the margin or padding properties are set to 0.

I assume that some other inherited property is inserting the space, but I don't know where to look to fix it - what CSS property could this be?

Use firebug extension to firefox and inspect what css is applied to your elements. — AbiusX, Mar 15 '11 at 14:33
@AbiusX I think he's already checked that "I've looked at the Computed Style ... " — Vian Esterhuizen, Mar 15 '11 at 14:37

Grzegorz Gierlik · Answer 1 · 2011-03-15T14:40:49.960

CR/LF characters in source HTML can insert space between elements.

Here is an example (intentionally with no indentation):

<html>
<head>
<style>
span {
border: 1px dotted black;
}
img {
border: 1px dotted red;
width: 90px;
height: 90px;
}
</style>
</head>
<body>
<h1>No CRLF</h1>
<span>Text</span><img src="">

<h1>CRLF</h1>
<span>Text</span>
<img src="">
</body>
</html>

Jeff Atwood spotted this when he built stackoverflow.com. He described this problem somewhere on the blog, but I cannot find this post.

score 0 · Answer 2 · answered Mar 15 '11 at 14:34

0

I suspected it was probably line-height and I did a quick test with JSFiddle and it seems to be what's creating the space. Using a line-height of 2px I got the text to basically touch the image.

Is that what you're looking for?

answered Mar 15 '11 at 14:34

Vian Esterhuizen

3,788
4
27
37

score 0 · Answer 3 · answered Mar 15 '11 at 14:34

0

If your page is using no quirks mode ( as it should be ) the problem is that your img is an inline element, try giving it a display:block

answered Mar 15 '11 at 14:34

armonge

3,108
20
36

score 0 · Answer 4 · edited May 23 '17 at 12:04

Don't put a div inside an anchor that is bad. Inline elements have issues holding block level elements. Try wrapping the text you want in a span and specify the width of the anchor rather than the text element. You can also clean this up a bit by making the image a background image of the anchor and use padding on the anchor to position things the way you want them.

<div style="width: 145px;">
        <a href="#" style="width: 180px;text-decoration:none;color:black">
           <img src="/images/eh-145x20.png" alt="cloud hosting" 
                    style="margin: 0px;" title="cloud hosting" />
           <span style="color: black; font-family: Verdana, Arial, sans-serif; font-size: 9px; text-shadow: gray 0.1em 0.1em 0.2em;">My text here</span>
</a></div>

CSS: what could be putting space between img and text, except margin and padding?

4 Answers4