CSS: what could be putting space between img and text, except margin and padding?
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开发者_JAVA技巧 (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?
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?
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
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>
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.
加载中,请稍侯......
精彩评论