"IMG" в "TD" и "фоновое изображение" из "TD" имеет разную высоту

Question

у меня есть два изображения:

• left.jpg является 250px47px, матрица с размерностью
• right.jpg является 1px ими - 47px.

Они помещаются в две ячейки той же строки таблицы:

• left.jpg переходит в левую ячейку в <img> тег,
• right.jpg переходит в правую ячейку, так как его background-image.

Вот HTML:

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

CSS-:

* { 
    margin: 0; 
    padding: 0; 
} 

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

Я сделал jsfiddle test page. Существует проблема с полученным результатом: ячейки 52px high, а не 47px, что создает белую полосу ниже изображения в левой ячейке.

Вопрос: Как я могу сделать высоту ячейки 47px и устранить белую полоску? Благодаря!

Обновление: Ни один из этих помощи:

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

Answer 1

Изображение не показан как встроенный элемент и имеет некоторое белое пространство ниже базовой линии.

Try:

img { 
    vertical-align: top; 
} 

См http://jsfiddle.net/audetwebdesign/RL5AE/

Answer 2

Изображения добавить вертикальный нижний отступы в случае, если текст должен быть введен. Чтобы избавиться от этого, добавить одно из ниже свойств CSS к изображению:

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

Я рекомендую display: block;