无法从内的中删除1个像素的底部边框;[英]Can't remove 1 pixel bottom border from inside ; 本文翻译自  David Ljung Madison  查看原文  2015-03-21  889    css/

I have a simple table, and it has a 1 pixel space underneath the <td> elements.

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

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/

另请访问：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

在Chrome 41.0.2272.89（但不是firefox）上，我看到来自显示在跨度下方的td的红色背景的1个像素

How can I remove this?

我该如何删除？

2 个解决方案

#1

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

你只需要设置span来显示：inline-block

why?

为什么？

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

因为span是一个内联元素，所以考虑到HTML中的空格。

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

评论之后，这里必须阅读有关INLINE ELEMENTS和INLINE-BLOCK ELEMENTS的内容

#2

use border bottom instead using background color red

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

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