html - 无法从 <td> 内的 <span> 中删除 1 个像素的底部边框；

Question

我有一个简单的表格，它在 <td> 下方有一个 1 像素的空间元素。

我试过摆脱 margins/padding/border-collapse/border-spacing/etc..，它仍然存在。

这是一个简单的例子:

<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>

也可在:http://jsfiddle.net/ydk4zob9/

在 Chrome 41.0.2272.89(但不是 firefox)上，我从 td 看到红色背景的 1 个像素显示在 span 下方

我怎样才能删除它？

Answer 1

你只需要将span设置为display:inline-block

为什么？

因为 span 是内联元素，因此会考虑 HTML 中的空格。

这是一个片段:

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>

编辑:

在评论之后，这是关于 INLINE ELEMENTS vs INLINE-BLOCK ELEMENTS 的必读内容