Html 在tr内对准div旁边的跨距会在它们之间产生间隙

我已经对齐了

div

旁边的

span

，如下所示，但元素之间存在间距。有人能告诉我是什么导致它出现以及如何删除它吗

<table>
<tr>
    <td>
         <div id="headerDiv" style="">DIV</div>
         <span id="labelSpan">test</span>
    </td>
</tr>

DIV
测试

---

内联块总是给出间隙。如果您不想这样做，您可以选择：

删除空格

<table>
    <tr>
        <td>
            <div id="headerDiv" style="">DIV</div><!--
         --><span id="labelSpan">test</span>
        </td>
    </tr>
</table>

---

Fiddle:使用

内联块

将在元素位于新行时创建一个空格。（最令人沮丧的例子是当你想与

li

并排时

要么这样做：

<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>

DIVtest

或者这个：

<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>

DIVtest

或者，您可以改为执行

float:left；

---

此间距是由空格引起的（两个元素都有内联布局），您可以通过以下方式读取它们：

• 在HTML标记中

例如：

---

它被称为

空白

，当标记中有空格（在同一行或新行上）时，它出现在内联（或内联块）元素之间

以下是为您提供的一些解决方案：

解决方案1-删除标记中的空白：

<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>

<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>

演示：

解决方案4-将子项向左浮动并清除容器，以保持高度上的正常文档流

演示：

<td>
     <div id="headerDiv">DIV</div><!--
  --><span id="labelSpan">test</span>
</td>

td {word-spacing: -100%;}

<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>

<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>