CODEWITHSUNDEEP
htmlimagehtml-table
Dusty
Dusty

Reputation: 11

Unwanted space in my html table

Here's the link, and as seen at the bottom of the pictures in my table is a 5px space that I would like to go away.

RELEVANT 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>

Upvotes: 1

Views: 681

Answers (5)

John BruceWayne Neitch
John BruceWayne Neitch

Reputation: 1

I know this question is several years old by now, but I happened upon it while encountering the same issue.

All you need to do is set display: block; on the offending image, whether it be in CSS or inline.

Hope this helps anyone else who finds this answer!

Upvotes: 0

waterjerome
waterjerome

Reputation: 31

I have this problem often when coding HTML emails since you have to use tables.

Put a style of vertical-align:bottom; on the image.

The reason given on this page is that images are inline elements and so space is reserved for typeface decenders... makes sense and works for me.

Upvotes: 3

streetlogics
streetlogics

Reputation: 4730

I saw you added the margin-bottom:-5px - just wanted to throw out an alternate solution:

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

That fixes the problem as well, might be a better overall solution rather than using negative margins.

Upvotes: 0

Pratik
Pratik

Reputation: 30855

try this

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

Upvotes: 0

Vitor Furlanetti
Vitor Furlanetti

Reputation: 451

You can put style="margin-bottom: -5px" on each of the images, it would be better to declare a class with this attribute and use it on the images.

E.G.

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

Upvotes: 1

Related Questions