在tr内部的div旁边对齐跨度会在它们之间产生间隙

Question

我已将span与div对齐，如下所示，但元素之间有间距。有人能告诉我是什么导致它出现以及如何删除它？

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

JSFiddle

Answer 1

当元素在新行上时，使用inline-block将创建一个空格。 （最令人沮丧的例子是当你希望li并排时。

要么这样做：

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

或者这个：

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

或者，您可以改为float:left;。

JSFiddle

Answer 2

inline-block总是给出差距。如果你不想要，你可以这样做：

删除空格

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

小提琴：http://jsfiddle.net/praveenscience/w3sjrgc4/2/

或使用float：

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

td {
    overflow: hidden;
}

td > span {
    float: left;
    border:2px solid;
}
td > div {
    float: left;
    border:2px solid;
}

小提琴：http://jsfiddle.net/praveenscience/vt4kr35w/

Answer 3

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

HTML标记中的
• pushing elements next to each other in one line;

示例：

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

• 使用<!-- --> tags;

示例：

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

• 使用word-spacing CSS属性。

CSS：

td {word-spacing: -100%;}

Answer 4

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

以下是一些解决方案：

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

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

演示 ：http://jsfiddle.net/w3sjrgc4/7/

解决方案2 - 在容器上将font-size设置为0，然后在子容器上检索它。

演示 ：http://jsfiddle.net/w3sjrgc4/9/

解决方案3 - 注释掉标记中的空格：

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

演示 ：http://jsfiddle.net/w3sjrgc4/10/

解决方案4 - 左浮动孩子并清除容器以保持高度正常的文件流。

演示 ：http://jsfiddle.net/w3sjrgc4/11/