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

Question

I have aligned a span next to div as shown below but there is a spacing between the elements. Can someone tell me what is causing it to appear and how to remove it?
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div>
<span id="labelSpan">test</span>
</td>
</tr>
JSFiddle

Answer 1

Using inline-block will create a space when elements are on a new line. (The most frustrating example is when you want li to be side-by-side.
Either do this:
<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>
Or this:
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
Alternatively, you can do float:left; instead.
JSFiddle

Answer 2

The inline-block always gives gap. If you don't want that, you can do either:
Remove the 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/
Or use 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 3

This spacing is caused by white spaces (both elements have inline layout), you can get read of them by :
pushing elements next to each other in one line in the HTML markup;
Example:
<td>
<div id="headerDiv">DIV</div><span id="labelSpan">test</span>
</td>
using <!-- --> tags;
Example:
<td>
<div id="headerDiv">DIV</div><!--
--><span id="labelSpan">test</span>
</td>
using word-spacing CSS property.
CSS:
td {word-spacing: -100%;}

Answer 4

It's called white space and occurs between inline (or inline-block) elements when there's space (on the same line or a new line) in the markup.
Here are a few solutions for you:
Solution 1- Remove the white space in the markup:
<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>
Demo: http://jsfiddle.net/w3sjrgc4/7/
Solution 2- Set the font-size to 0 on the container then retrieve it on the children.
Demo: http://jsfiddle.net/w3sjrgc4/9/
Solution 3- Comment out the white space in the markup:
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
Demo: http://jsfiddle.net/w3sjrgc4/10/
Solution 4- Left float the children and clear the container to maintain normal document flow on the height.
Demo: http://jsfiddle.net/w3sjrgc4/11/