html - IMG 和 TD 的 CSS 宽度/高度

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.

这是 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>

还有 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

这样做:

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

和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