CSS width/height of IMG and TD

Question

I have a problem in css, I have a TD with a width:100px; and height:100px; inside it, I have an img element with the same width and height (100px, 100px). The problem is that the TD is automatically resized to 145px width and 114 px height.

If anyone know why, and how to solve it please help me! (it would be great if I did not need no increase my TD's size, my image must be 100*100) This problem has been fixed, I had commented that part of the css. But my image is now placed under my text in titleTD and descTD.

Here's the HTML

<div id="pixelContent">
        <table id="pixelContentTable">
        <tr valign=center>
            <td id="imageTD" rowspan=2>
                <a href=""><img src="" id="contentImage" border="0" width="100px" height="100px"></a></td>
            <td id="titleTd">Title here</td>
        </tr>
        <tr valign=center>
            <td id="descTd">Lorem ipsum dolor sit amet, <a href="http://google.com"> nunc in sapien gravida</a> eleifend. Maecenas consectetur, risus id lobortis molestie, magna sapien ullamcorper justo, ultrices </td>
        </tr>
        </table>
    </div>

And the CSS:

#pixelContentTable{
margin: 0 auto;
width:400px;
height:120px;
text-align:left;
}

#contentImage{
margin-left:10px;
width:100px;
height:100px;
min-width:100px;
min-height:100px;
max-width:100px;
max-height:100px;
}



  #imageTD{
    width:100px;
    height:100px;
    min-width:100px;
    min-height:100px;
    max-width:100px;
    max-height:100px;
  }

Answer 1

Do it this way:

<table>
  <tr>
    <td>
      <img src="" alt />
    </td>
  </tr>
</table>

and CSS:

img {
  width: 100px;
  height: 100px;
  display: block;
}

td {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  padding: 0;
}

http://codepen.io/Chovanec/pen/otaFb