Нежелательное пространство в моей HTML-таблице

Question

Вот ссылка , и, как видно в нижней части рисунков в моей таблице, это 5px пробел, который я бы хотел убрать.

СООТВЕТСТВУЮЩИЙ HTML

<table border="1" bordercolor="#D88830" style="background-color:#555555;" cellspacing="0">
  <tr>
    <td>
      <img src="../../../images/team_members_dusty_arlia.jpg" alt="Dusty Arlia Picture" border="0" />
    </td>
    <td style="padding:25px; vertical-align:top;" width="550">
      <b>Name</b>: <i>Dusty Arlia</i><br />
      <b>Position</b>: <i>Owner</i><br />
      <b>Start Date</b>: <i>Founded on April 20, 2010</i><br />
      <b>Interests</b>: <i>Loves to snowboard in the winter, play volleyball in the summer, and gives lessons on foosball year round.</i>
    </td>
  </tr>

Answer 1

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

Поместить стиль vertical-align: bottom; на изображение.

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

Answer 2

Вы можете поместить style = "margin-bottom: -5px" на каждое из изображений, было бы лучше объявить класс с этим атрибутом и использовать его на изображениях.

EG

<img src="../../../images/team_members_jacquelyn_buffo.jpg" alt="Jacquelyn Buffo Picture" border="0" style="margin-bottom: -5px">

Answer 3

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

Все, что вам нужно сделать, это установить display: block; на оскорбительном изображении, будь то в CSS или в строке.

Надеюсь, это поможет любому, кто найдет этот ответ!

Answer 4

Я видел, как вы добавили поле margin-bottom: -5px - просто хотели выбросить альтернативное решение:

<img style="float:left;" ... /> 

Это также решает проблему, может быть лучшим решением в целом, чем использование отрицательных полей.

Answer 5

попробуйте

<img src="../../../images/team_members_dusty_arlia.jpg"  alt="Dusty Arlia Picture" border="0" style="margin-bottom:-5px" />