<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Inline Box Model: Behaviour near cells</title>
  <style type="text/css">
   div, table, tr, td { margin: 0; border: 0; padding: 0; border-spacing: 0; }
   .test > * { border: solid blue; font-size: 5em; font-family: monospace; float: left;
               margin: 0.2em; height: auto; width: 3em; text-align: center; }
   .img { vertical-align: -1px; } /* the image's baseline is 1px from its bottom */
  </style>
 </head>
 <body>
  <p>The following three boxes should be the same size (the last box's text might not be).</p>
  <div class="test">
   <div>Test</div>
   <table><tr><td>Test</td></tr></table>
   <table><tr><td><img src="404" alt="Test"/></td></tr></table>
   <table><tr><td><img class="img" src="test.png" alt="(image test failed)"/></td></tr></table>
  </div>
 </body>
</html>
