Question

过去几个小时我一直在研究这个问题而且我放弃了。我无法想出这个。

我有一个图片（标题徽标），后面是导航栏。图像下方有2-3px的空间。我已经系统地删除了所有外部引用的CSS，然后添加了一些内联CSS来尝试解决问题。这就是我现在所拥有的：

<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>

这是该页面的截图，以及我在我的系统上看到的内容（Win，xp，在IE8和FF 13中相同）

http://picturepush.com/public/8737985

Answer 1

你得到了它。

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

删除了<br>并为您的图片添加了display:block。空间消失了。

问题是<br>它有一个微小的余量，你不能删除......我猜。此外，您还需要为图片添加display:block，因此文字会显示在底部。

（同样删除了引号中的一点错误）

Answer 2

图片标记代码不正确您没有关闭alt属性，因此样式没有生效，您应该使用双引号

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

您还可以删除<br>并在图片上设置display:block;

Answer 3

使用Mac OS X / Chrome没有任何差距。我的猜测是你的浏览器在除了1之外的跨度上设置行高。

尝试使用重置样式表http://meyerweb.com/eric/tools/css/reset/。同样Firebug将允许您将鼠标悬停在元素上，以查看哪些尺寸元素可以指向填充的来源。

Answer 4

如果理解正确，问题是由于图像不仅是文本等内联元素，而且还被视为“文本”。文本是用基线编写的。大多数字母在此基线上对齐，但有些字母，如j，g和y不对齐。因此，渲染文本时，底部的一些像素包含在基线下方。你可以通过添加

来解决这个问题

line-height:0px;

到您的图片代码。

这种图像 - 等同字母的想法的另一个奇怪的结果是应该并排排列的图像显示出间隙。确实：字母之间有空格！您可以通过添加到sme图像标记来解决此问题：

font-size:0px;

解决您提到的问题的另一种方法是使标题图像成为具有相同尺寸的div的背景图像。 Div只是容器，没有类似字体的属性。

希望这有帮助！

为什么我不能摆脱这张图片下方的空间？

4 个答案: