Html 为什么可以'；我不能去掉这张图片下面的空间吗？_Html_Css_Image

Html 为什么可以'；我不能去掉这张图片下面的空间吗？

html css image

Html 为什么可以'；我不能去掉这张图片下面的空间吗？,html,css,image,Html,Css,Image,在过去的几个小时里我一直在做这个，我放弃了。我搞不懂这个我有一个图像（标题标志），后面是导航栏。图像下方有一个2-3倍的空间。我系统地消除了所有外部引用的CSS，然后添加了一些内联CSS来尝试解决这个问题。以下是我现在拥有的： <html lang='en'> <head> <meta charset='utf-8' /> <title>Sci-fi's Big Mistake<

在过去的几个小时里我一直在做这个，我放弃了。我搞不懂这个

我有一个图像（标题标志），后面是导航栏。图像下方有一个2-3倍的空间。我系统地消除了所有外部引用的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相同）

使用Mac OS X/Chrome对我来说没有差距。我猜您的浏览器在跨度上设置的线高度不是1

尝试使用重置样式表。您还可以轻松地将鼠标悬停在元素上，查看元素的大小，以确定填充的位置。

使用Mac OS X/Chrome时，我没有任何间隙。我猜您的浏览器在跨度上设置的线高度不是1

尝试使用重置样式表。您还可以轻松地将鼠标悬停在元素上，查看元素的大小，以锁定填充的来源。

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

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

您还可能需要删除

并设置

显示：块
图像标记代码不正确您没有关闭alt属性，因此样式不会生效，您应该使用双引号
<img src='/images/farscape.jpg'  alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>




您还可能需要删除
并设置显示：块在图像上
就是这样

删除
并在图像中添加显示：块。
空间消失了
问题是
它有一个你无法删除的最小余量。。。我想是吧。
此外，您还必须在图像中添加显示：块
，以便文本显示在底部
（还删除了引号中的一个小错误）
你明白了

删除
并在图像中添加显示：块。
空间消失了
问题是
它有一个你无法删除的最小余量。。。我想是吧。
此外，您还必须在图像中添加显示：块
，以便文本显示在底部
（还删除了引号中的一个小错误）如果您理解正确，问题的原因是图像不仅是像文本这样的内联元素，而且还被认为是“文本”。文本是用基线编写的。大多数字母在此基线上对齐，但有些字母，如j、g和y则不对齐。因此，在渲染文本时，一些空间像素包含在基线下方的底部。
你可以通过添加
line-height:0px; 

到您的图像标签
这个“图像等于字母”想法的另一个奇怪结果是，应该并排排列的图像显示了一个间隙。事实上：字母之间有空格！您可以通过向sme图像标签添加以下内容来解决此问题：
font-size:0px;


解决您提到的问题的另一种方法是将该标题图像作为具有相同维度的div的背景图像。Div只是容器，没有类似字体的属性
希望这有帮助 如果您理解正确，问题的原因是图像不仅是像文本这样的内联元素，而且还被认为是“文本”。文本是用基线编写的。大多数字母在此基线上对齐，但有些字母，如j、g和y则不对齐。因此，在渲染文本时，一些空间像素包含在基线下方的底部。
你可以通过添加
line-height:0px; 

到您的图像标签
这个“图像等于字母”想法的另一个奇怪结果是，应该并排排列的图像显示了一个间隙。事实上：字母之间有空格！您可以通过向sme图像标签添加以下内容来解决此问题：
font-size:0px;


解决您提到的问题的另一种方法是将该标题图像作为具有相同维度的div的背景图像。Div只是容器，没有类似字体的属性
希望这有帮助
 是否有任何外部样式表？是否有任何外部样式表？复制时可能是o型。这是一个开发（又名世界私有）网站，但我会发布代码（如上所述，但我会先删除实际的客户端内容和文本，如上所述）。确认缺少的报价确实存在于现场网站上。我从未见过使用双引号会导致随机间距。我使用单引号，这样我就可以在PHP中双引号引用包含所有HTML的变量，然后回显到屏幕上。我更喜欢在双引号中嵌入变量，而不是必须“中断”$起来。”带有单引号的“内容”。这可能是复制时的o型。这是一个开发（又名世界私有）网站，但我会发布代码（如上所述，但我会先删除实际的客户端内容和文本，如上所述）。确认缺少的报价确实存在于现场网站上。我从未见过使用双引号会导致随机间距。我使用单引号，这样我就可以在PHP中双引号引用包含所有HTML的变量，然后回显到屏幕上。我更喜欢在双引号中嵌入变量，而不是必须“中断”$起来。”“内容”用单引号表示。