html 如何将div 里面的图片设置与div等宽，没有缝隙？

如图，我在div标签里面放了图片和文字，并且把div的宽设置与图片等宽，但是右边框还是会有间距出现，不管怎么调整宽度都会有缝隙。请问我应该怎么做？

  <div    style="border:1px solid #C0C0C0"   style="width:490px"   >
     <img src="images\ssh.zetadata_04.gif" width="490" height="278">

！代码如上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AA-0302</title>

<style type="text/css" >

#bodydiv{ position:relative; margin-left:95px; margin-right:95px;}

#body{
background-color:#ffffff;
margin-top:auto;
color: #996600;
font-family: "黑体";
;
}
.text{
text-align:center;
}

.title{
float:left;
}




#bannerdiv{ position:relative;}
#bannertable{}
#centerdiv{ position:relative; padding-left:3px;}
#centertable{ }
#rootdiv{ margin-top:11px;}
</style>

</head>

<body id="body" >
<div id="bodydiv">

<div id="bannerdiv">
  <table align="center" id="bannertable" >
    <tr>
       <td>
       <img src="images\ssh.zetadata_01.gif" width="1900" height="550">    <!--修改banner长宽-->
       </td>
     </tr>
   </table>

</div>

</br>
</br>
<div id="centerdiv">
 <table id="centertable"   border="0"  cellpadding="8px"  align="center">
   <tr>
    
      <td rowspan="2"    border="0"  >
<div>
<font  class="title"   size="4"  color="000000">热门活动</font></br></br>


    <div    style="border:1px solid #C0C0C0"   style="width:490px"    font-size:0;>
 <a href="summer_camp.html"  style="text-decoration:none">
     <img src="images\ssh.zetadata_04.gif" width="490" height="278">
       </br>
</br>
      <font  size="4"  color="000000">"I Love EP"创意绘画展</font>
    </br>
 </br>

   <font  size="2"  color="#C0C0C0">活动时间：2016-03-06 10:30-11:30</font>
</br>
     </br>

    </a>   

</div>
</div>

    </td>


     <td rowspan="2">
<div>
<font  class="title"   size="4"  color="000000"> </font></br></br>
    <div    style="border:1px solid #C0C0C0"   style="width:100px"  >
 <a href="summer_camp.html"  style="text-decoration:none">
     <img src="images\ssh.zetadata_05.gif" width="490" height="278">
       </br>
</br>
      <font  size="4"  color="000000">科学梦想家夏令营动员大会</font>
    </br>
 </br>

   <font  size="2"  color="#C0C0C0">活动时间：2016-06-06 10:30-11:30</font>
</br>
     </br>

    </a>   

</div>
</div>
    </td>

   </tr>

  </table>
</div>



</br>
</br>
<div id="centerdiv">
 <table id="centertable"   border="0"  cellpadding="8px"  align="center">

   <tr>
    
      <td rowspan="2"    border="0"  >
<div>
<font  class="title"   size="4"  color="000000">往期活动</font></br></br>
    <div    style="border:1px solid #C0C0C0"   style="width:100px"  >

     <img src="images\ssh.zetadata_08.gif" width="490" height="278">
       </br>
</br>
      <font  size="4"  color="000000">农行杯 我有一个公益梦</font>
    </br>
 </br>

   <font  size="2"  color="#C0C0C0">活动时间：2015-12-06 10:30-11:30</font>
</br>
     </br>

</div>
</div>
    </td>


     <td rowspan="2">
<div>
<font  class="title"   size="4"  color="000000"></font></br></br>
    <div    style="border:1px solid #C0C0C0"   style="width:100px"  >

     <img src="images\ssh.zetadata_09.gif" width="490" height="278">
       </br>
</br>
      <font  size="4"  color="000000">私塾慧幼儿时装大赛</font>
    </br>
 </br>

   <font  size="2"  color="#C0C0C0">活动时间：2015-10-01 10:30-11:30</font>
</br>
     </br>
 

</div>
</div>
    </td>

   </tr>

  </table>
</div>





</div>
</body>
</html>

要不就width=100%，检查你的 div的 padding

包裹层div{font-size:0;}
内部的文字内容重新设置字体大小

看看div的padding和img的margin

对img元素设置display:block，让他成为会计元素。

原因是：浏览器bug，默认在img元素后面添加了空格。

div {
    padding: 0;
}
img {
    width: 100%;
}

【热门文章】