Html CSS：图像（IMG）元素下方会出现一条2像素线？

有人能告诉我为什么在图像下方和导航栏上方有一条线（背景色，本例中为红色）？Firefox和Chrome都显示红线，所以我假设它是按预期呈现的。但我似乎无法通过开发人员工具找到问题。边框、填充和边距都是0，这令人费解。下面是代码的精简版本，或者：

---

我只是在-我设置了垂直对齐：中间而不是基线，它解决了这个问题。这对您来说是一个可行的解决方案，还是您需要它作为基线？

在

中添加
显示：块
#标题图像

将修复它

 #title-image {
     width: 100%;
     display:block;
 }

---

设置图像CSS上的

垂直对齐：底部

发生这种情况的原因是图像与文本内联显示。这意味着，如果字母
y
、
g
等下降到基线以下并导致空格，则必须在该行下方留出一个小空格

通过将
垂直对齐
设置为
底部
，可以移动图像，使其与文本底部对齐，从而避免此问题

有一个例外，您应该注意：如果图像的高度小于一行文本，它将在其上方留下一个间隙，以便为该文本腾出空间，除非您将包含元素设置为具有有效的
行高度。
您能将此减少到最低程度吗？到目前为止，我认为这是“太本地化”，除非可以确定一个特定的问题。嗨，我在这里更新了一个最低版本：。谢谢。更简单：更新问题以反映。+1。是的，这就是为什么过度全面的CSS重置是邪恶的：）是的，这是可行的，Brett的解决方案也是如此。尽管完全省略“垂直对齐”并不能解决这个问题。不过，这仍然是一个很好的解决办法。谢谢你，克拉克小子！有效，但过于本地化，无法给出理想的答案。@Kolink-我不同意。我以前多次遇到过这种情况——填充容器的内联元素会在容器下方留下一个间隙。解决方案始终是显示：块，或在其后面加一个

，或将其包装在块元素中。
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#main-wrapper {
    width: 90%;
    margin: 0 auto;
    border: 3px solid #888;
    margin-top: 20px;
    background: red;
}

#title-image {
    width: 100%;
}

#main-navbar {
    width: 100%;
    background: #333333;
}

 #title-image {
     width: 100%;
     display:block;
 }