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

【问题标题】：CSS: A 2-pixel line appears below image (IMG) element?CSS：图像（IMG）元素下方出现一条 2 像素线？
【发布时间】：2014-05-08 23:59:43
【问题描述】：

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

  <body>
    <div id="main-wrapper">
      <header id="main-header">
        <img id="title-image" src="http://i.imgur.com/JaYSY.jpg" />
        <div id="main-navbar">
            STUFF
        </div>
      </header>
    </div>
  </body>

CSS：

* {
    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;
}

【问题讨论】：

你能把这个减少到最小的情况吗？截至目前，除非可以确定特定问题，否则我认为这是“过于本地化”。
嗨，我在这里更新了一个最小版本：jsfiddle.net/bvss4/1。谢谢。
更多：jsfiddle.net/bvss4/9 更新问题以反映。

标签： html css image

【解决方案1】：

将display:block 添加到您的#title-image 将修复它

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

JSFiddle here

【讨论】：

有效，但过于本地化，无法提供理想的答案。
@Kolink - 我不同意。我之前遇到过很多次 - 填充容器的内联元素在其下方留下一个间隙。解决方案始终是display: block，或者在其后面加上<br/>，或者将其包装在一个块元素中。

【解决方案2】：

在图片的 CSS 上设置 vertical-align: bottom。

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

通过将vertical-align 设置为bottom，您可以移动图像使其与文本底部对齐，从而避免此问题。

您应该注意一个例外情况：如果图像的高度小于单行文本，则会在其上方留出空隙以便为该文本腾出空间，除非您将包含元素设置为具有 @ 987654326@ 有效。

【讨论】：

【解决方案3】：

我刚刚在http://jsfiddle.net/nUacj/ 尝试过 - 我设置了垂直对齐：中间而不是基线，它解决了这个问题。这对您来说是一个可行的解决方案还是您需要它作为基准？

【讨论】：

+1。是的，这正是过度全面的 CSS 重置是邪恶的原因 :)
是的，Brett 的解决方案也有效。尽管完全省略“垂直对齐”并不能解决这个问题。虽然仍然是一个很好的解决方法。谢谢克拉基男孩！