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

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/