无法从 <td> 内的 <span> 移除 1 个像素的底部边框；

Question

我有一个简单的 table，它在 <td> 元素下方有一个 1 像素的 space。

我已经尝试摆脱 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

的必读内容

Answer 2

使用边框底部而不是使用背景颜色红色

<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='margin: 0px; padding: 0px; border: 0;'><span style='background-color: white; margin: 0px; padding: 0px;border-bottom:1px solid red'>
                The first span
            </span></td>
    </tr>
    <tr style='margin: 0px; padding: 0px; border: 0;'>
        <td style='margin: 0px; padding: 0px; border: 0;'>
            <span style='background-color: white; margin: 0px; padding: 0px; border-bottom:1px solid red'>
                The second span
            </span>
        </td>
    </tr>
</table>

无法从 <td> 内的 <span> 移除 1 个像素的底部边框；

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

html

css

google-chrome

html-table

编辑：