CODEWITHSUNDEEP
htmlcssalignment
Divya MV
Divya MV

Reputation: 2053

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

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

Upvotes: 3

Views: 136

Answers (4)

Arbel
Arbel

Reputation: 30999

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/

Upvotes: 1

potashin
potashin

Reputation: 44581

This spacing is caused by white spaces (both elements have inline layout), you can get read of them by :

Example: 

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

Example: 

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

CSS:

td {word-spacing: -100%;}

Upvotes: 2

Albzi
Albzi

Reputation: 15609

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

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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/

Upvotes: 3

Related Questions