对齐 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总是给出差距。如果你不想这样，你可以这样做：

删除Space

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

Fiddle: 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;
}

Fiddle: http://jsfiddle.net/praveenscience/vt4kr35w/

Answer 2

使用 inline-block 将在元素位于新行时创建 space。（最令人沮丧的示例是当您希望 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 3

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

pushing elements next to each other in one line 在 HTML 标记中；

示例：

<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，当标记中有 space（在同一行或新行上）时，它出现在行内（或行内块）元素之间。

这里有一些解决方案供您使用：

解决方案1-去掉标记中的白色space：

<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-注释掉标记中的白色space：

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

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

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

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

对齐 tr 内 div 旁边的跨度会在它们之间创建一个间隙

Aligning span next to div inside tr creates a gap between them

html

css

alignment

Fiddle: http://jsfiddle.net/praveenscience/w3sjrgc4/2/

Fiddle: http://jsfiddle.net/praveenscience/vt4kr35w/