1

Notice in the following screenshot, there is a white space under image: enter image description here

I don't understand why there is this gap, how do I remove it. The page is live at http://goo.gl/Kf8FV5

Markup:

<section id="pricing-table">
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="10">&nbsp;</td>
<td width="760" height="10" colspan="4" align="left" valign="top"><img src="images/membership-plans-design_03.png" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="images/membership-plans-design_08.png" alt=""></td>
<td><img src="images/membership-plans-design_09.png" alt=""></td>
<td><img src="images/membership-plans-design_10.png" alt=""></td>
<td><img src="images/membership-plans-design_11.png" alt=""></td>
</tr>
</table>
</section>

Css:

#pricing-table { margin: 0 auto; width: 950px; text-align: center;}
.featureset {
background-image: url(images/membership-plans-design_05.png);
background-repeat: no-repeat;
height: 42px;
margin: 0;
padding: 0;
color:#FFF;
}
.featurehead {
background-color:#CCC;
font-weight: bold;
border-bottom: 1px solid grey;
}

Any help is highly appreciated. Thanks in advance.

Grey-lover
  • 635
  • 3
  • 7
  • 21
  • http://stackoverflow.com/a/5804278/1612146 – George May 15 '14 at 07:42
  • Your HTML markup is a complete mess. You are missing `` tags and you seem to have a table within a `` you are always going to have problems with the layout. Consider using `
    ` instead.
     – J2D8T May 15 '14 at 07:47

4 Answers4

5

Images are inline elements, so they have a white space after them (like a <span> element). To remove that white space, change them to block elements like this : 

img{
    display:block;
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
0

Change <img src="images/membership-plans-design_03.png" alt=""> to 

<img src="images/membership-plans-design_03.png" alt="" style="display: block;">

And to be more precise images are an inline-block element.

vaskort
  • 2,591
  • 2
  • 20
  • 29
0

Add this to your CSS,

section#pricing-table td img{
  display: block;
}
Sarvap Praharanayuthan
  • 4,212
  • 7
  • 47
  • 72
0

<img> is an inline-block element by default. You can remove the white space around it by setting it's parent's font-size to zero, or by changing it's display property.

JSFiddle Demo

T J
  • 42,762
  • 13
  • 83
  • 138