CSS:图像(IMG)元素下方出现2像素线？

Question

CSS:图像(IMG)元素下方出现2像素线？

任何人都可以向我指出为什么在图像下方和导航栏上方有一条线(背景颜色,在这种情况下为红色)？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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

坏红线

Answer 1

Bre*_*ody 12

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

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

Run Code Online (Sandbox Code Playgroud)

JSFiddle在这里

@Kolink - 我不同意.我之前遇到过很多次 - 填充容器的内联元素在它下面留下了一个空隙.解决方案始终是`display:block`,或者用```跟随它,或者将它包装在一个块元素中. (2认同)

Answer 2

Nie*_*sol 6

设置vertical-align: bottom在图像的CSS上.

它发生的原因是因为图像与文本内联显示.这意味着,他们必须允许在封样情况下,线下一个狭小的空间y,g即下降低于基线,并导致空间等.

通过设置vertical-alignto bottom,您可以移动图像,使其与文本底部对齐,从而避免出现此问题.

您应该注意一个例外:如果图像的高度低于单行文本,它将在其上方留出一个间隙以为该文本腾出空间,除非您将包含元素设置为line-height有效.

归档时间：	14 年，1 月前
查看次数：	7966 次
最近记录：	11 年，9 月前