Невозможно удалить интервал границы в таблице

Я хочу, чтобы изображение и серая область в прилагаемом примере слипались и имели одинаковую высоту, но я не могу удалить интервал границы, который разрушает это.

Есть идеи, что я делаю не так? Извините за грязную таблицу стилей.

https://jsfiddle.net/q43L8pqy/1/

PS: я знаю, что это может быть решено с помощью div's, но это для очень специфической среды.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<style>
    body {
    background-color: #efefef;
    border: 0px;
    margin: 0px;
    }


    h1, h2, h3 {
        color: #333333;
        margin: 0px;
        font-family: Verdana, Helvetica;
    }

    }
    h1 {font-size: 21px;}
   h2   {font-size:18px;font-weight:bold;}
   h3 a {color: #0269cd; text-decoration: none; text-decoration: none;font-weight:bold;}

   table.module{border-spacing:0!important;background-color: #ffffff;border-collapse: collapse;}

    h3 {font-size: 16px;font-weight:normal;}

    html,body{min-width:600px;} 

</style>
</head>
<body style="background-color: #efefef;">
<div style="padding-top:150px;padding-bottom:150px;background-color:white;">
<table width="600" height="242" align="center" border="0" cellspacing="0" cellpadding="0" class="module" >
<tr>
<td width="263" height="242" style="padding-left:30px;"><a href="http://www.cnn.com"> <img src="http://placekitten.com/263/242" width="263" height="242" alt="Module2_img"></a></td>

<td width="277" height="242" align="left" style="padding-left:18px;background-color:#efefef;">
<h2>Content</h2><br>
<h3>There should be a cute cat on the left <br><br>
<a href="http://www.ikea.no/">Click this</a></h3>


</td>
</tr>
</table>
</div>

</body>
</html>
Источник

1 ответ

Решение

Я смог исправить это, изменив две вещи.

Чтобы ваше изображение прилипало к правой стороне столбца, вам нужно увеличить отступ второй ячейки с 18px в 30px, Кроме того, вы можете сделать каждую ячейку одинаковой ширины, а затем плавать изображение вправо.

Чтобы избавиться от дополнительных отступов под изображением, вы захотите добавить display: block; к пострадавшему изображению. <img> это встроенный элемент, поэтому он оставит дополнительный отступ под собой, чтобы освободить место для других элементов, таких как текст.

Если вы не можете использовать display: block; по какой-либо причине, vertical-align: bottom; будет работать так же. Это позволит вам держать изображение встроенным, и установит вертикальное выравнивание изображения так, чтобы оно соответствовало нижней части ячейки таблицы.

Источник
Другие вопросы по тегам