CODEWITHSUNDEEP
htmlcss
lesssugar
lesssugar

Reputation: 16181

Unwanted space between table rows/cells, for the 532nd time

Tables beat me again.

I have a very simple one here:

<table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;">
  <tr style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
    <td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
      <img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" alt="" style="width: 100%;">
    </td>
  </tr>
  <tr style="background-color: grey; margin: 0; padding: 0; border: none; border-collapse: collapse;">
    <td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">Hehehehehehe</td>
  </tr>
</table>

Fiddle: http://jsfiddle.net/ohys4x2o/

I think I already added too much of styles like border: none; padding: 0; and so on to the code - yet still there's an unwanted space between the row with the cat and the grey one with "Hehehe" text.

Table gurus welcome. Please, help. Please. Those tables.. they.. kill me...

Upvotes: 0

Views: 38

Answers (2)

David
David

Reputation: 34563

The problem is the image, not the table. Similar to this other question, the image is including the extra pixels because it is an "inline-block" element. If you add "display:block" to the image it will remove the space.

Upvotes: 2

j08691
j08691

Reputation: 207901

Set the vertical alignment on the image to top:

img {
  vertical-align:top;
}

jsFiddle example

By default it's set to baseline and reserves space for descender text elements (e.g. g, y, j)

Upvotes: 2

Related Questions