Html “td”中的“img”和“td”中的“background-image”具有不同的高度

"img" in "td" and "background-image" of "td" have different heights

提问by kol

I have two images:

我有两张图片：

• left.jpgis 250px-by-47px,
• right.jpgis 1px-by-47px.

• left.jpg是250px- 47px，
• right.jpg是1px- 47px。

These are put into the two cells of the same table row:

这些被放入同一表格行的两个单元格中：

• left.jpggoes into the left cell in an <img>tag,
• right.jpggoes into the right cell, as its background-image.

• left.jpg进入<img>标签中的左侧单元格，
• right.jpg进入正确的单元格，因为它的background-image.

Here is the HTML:

这是 HTML：

<table>
  <tbody>
    <tr>
      <td><img src="left.jpg" /></td>
      <td background="right.jpg" width="100%"></td>
    </tr>
  </tbody>
</table>  

The CSS:

CSS：

* {
    margin: 0;
    padding: 0;
}

table {
    width: 100%;
    border-bottom: solid 1px black;
    border-collapse: collapse;
}

I made a jsfiddle test page. There is a problem with the rendered result: the cells are 52pxhigh instead of 47px, which creates a white strip below the image in the left cell.

我做了一个jsfiddle 测试页。渲染结果存在问题：单元格52px高而不是47px，这会在左侧单元格中的图像下方创建一个白色条带。

Question:How can I make the cell height 47px, and eliminate the white strip? Thanks!

问题：如何设置单元格高度47px，并消除白条？谢谢！

Update:None of these help:

更新：这些都没有帮助：

tbody { height: 47px; }
tr { height: 47px; }
td { height: 47px; }

回答by Marc Audet

The image is shown as an inline element and it has some white space below the baseline.

图像显示为内联元素，并且在基线下方有一些空白。

Try:

尝试：

img {
    vertical-align: top;
}

See http://jsfiddle.net/audetwebdesign/RL5AE/

见http://jsfiddle.net/audetwebdesign/RL5AE/

回答by sandrows

Images add a vertical bottom padding in case text is to be entered. To get rid of that, Add either of the below CSS properties to your image:

图像添加垂直底部填充以防输入文本。要摆脱这种情况，请将以下任一 CSS 属性添加到您的图像中：

1. display: block;
2. vertical-align: top;
3. float: left;

1. display: block;
2. vertical-align: top;
3. float: left;

I recommend display: block;

我建议 display: block;