David Ljung Madison David Ljung Madison - 5 months ago 11
CSS Question

Can't remove 1 pixel bottom border from <span> inside <td>;

I have a simple table, and it has a 1 pixel space underneath the

<td>
elements.

I've tried getting rid of
margins/padding/border-collapse/border-spacing
/etc.., and it's still there.

Here's a simple case:

<table border=0 cellpadding=0 cellspacing=0 style='margin: 0px; padding: 0px; border: 0; border-spacing: 0; border-collapse: collapse;'>
<tr style='margin: 0px; padding: 0px; border: 0;'>
<td style='background-color: red; margin: 0px; padding: 0px; border: 0;'><span style='background-color: white; margin: 0px; padding: 0px; border: 0;'>
The first span
</span></td>
</tr>
<tr style='margin: 0px; padding: 0px; border: 0;'>
<td style='background-color: red; margin: 0px; padding: 0px; border: 0;'>
<span style='background-color: white; margin: 0px; padding: 0px; border: 0;'>
The second span
</span>
</td>
</tr>
</table>


Also available at: http://jsfiddle.net/ydk4zob9/

On Chrome 41.0.2272.89 (but not firefox) I see 1 pixel of the red background from the
td
showing underneath the
span


Table on chrome

How can I remove this?

Answer

you just need to set span to display:inline-block

why?

because span is an inline element therefore takes a whitespace in your HTML into account.

here is a snippet:

table {
  border-collapse: collapse;
}
td {
  background-color: red;
  padding:0;
}
span {
  background-color: white;
 
}
.first span {
  display: inline  /*the default value*/
}
.second span {
  display: inline-block
}

.third span {
  display: block
}
<h1>Inline</h1>
<table class="first">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>
<hr />
<h1>Inline-block</h1>
<table class="second">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>
<hr />
<h1>Block</h1>
<table class="third">
  <tr>
    <td>
      <span>The first span</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>The second span</span>
    </td>
  </tr>
</table>

EDIT:

After the comments, here is a must read about INLINE ELEMENTS vs INLINE-BLOCK ELEMENTS

Comments