How to remove space between images and borders of tables in Chrome

Published on by Jin

A couple of week ago, I found an issue on my website. IE, Firefox and Safari worked well with my website, but Chrome displayed mysterious 2-3 pixels of white space between the bottom of the images and the border of the tables on my website.

[Open the code that shows the issue with Chrome]

Actually, I set the space among the cell walls and the cell contents to 0 pixels by using the attributes: [cellpadding], [cellspacing]. In additions, the values of the border attributes on the table and the images were zero. Therefore, I thought there is no reason for the mysterious white space.

<table width="200" height="150" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
  <tr>
   <td width="200" height="50">
      <img border="0" src="cell1.jpg"> 
   </td>
  </tr>
 ....	
 </table>

I researched the issue for several days. There were so many similar cases on the Internet, but I cannot find the reason of my case. As a result, I tested a bunch of cases. I started the test with a code excluding any CSS codes. In that case, Chrome didn’t display any space between the images and the borders of the tables, so I assumed a CSS attribute caused this issues. Finally, I found what triggered the space. The reason was the attribute: “word-break:break-all;” in my CSS code.

<STYLE TYPE='text/css'>
   body {
     word-break: break-all;
   }
</STYLE>

Even though I found the reason, I wasn’t able to solve the problem because I needed the attribute: “word-break:break-all;” in my CSS code. I guessed Chrome recognizes images like words because  <img> is an inline element, so the attribute makes space after images. Therefore, I tried to set the images to block elements by using CSS display property: “display: block;”. I also used .class selector to specify the only images that showed the mysterious space. The shot worked.

<html>
 <head>
  <title>Example.2</title>
  <STYLE TYPE='text/css'>		
  body {
    word-break:break-all;
  }
  img.noSpace
  {
    display: block;
  }
  </STYLE>
 </head>

 <body> 
 <table width="200" height="150" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
   <tr>
     <td width="200" height="50">
	<img class="noSpace" border="0" src="cell1.jpg"> 
     </td>
    ......
 </table> 
 </body>
</html>

[Open  this code with Chrome]

If you have further questions, please feel free to contact me.

Blessings,
Jin

Leave a Reply