无法从<span>内部删除1个像素的底部边框; </span>

Question

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

我试图摆脱margins/padding/border-collapse/border-spacing /等等......它仍在那里。

这是一个简单的案例：

<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

下面显示span的红色背景的1个像素

如何删除此内容？

Answer 1

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

即可

为什么？

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

这是一个片段：

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

评论之后，必须阅读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>