Clever Geek Handbook

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

I have aligned a span

next to div

like below, but there is spacing between the elements. Can anyone 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

+3


source to share


4 answers


Usage inline-block

will create space when items are on a new line. (The most frustrating example is when you want to li

be side by side.

Or do the following:

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

Or that:



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

Alternatively, you can do float:left;

this instead.

JSFiddle

+4


source


inline-block

always gives a space. If you don't want this, you can do this:

Remove 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/

+3


source


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

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%;}
+2


source


It is named white space

and occurs between inline (or inline blocks) elements when there is room in the markup (on the same line or newline).

Below are some solutions :

Solution 1 - Remove the 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

value to 0 in the container, then remove it for children.

Demo : http://jsfiddle.net/w3sjrgc4/9/

Solution 3 - Comment out the space in the markup:

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

Demo : http://jsfiddle.net/w3sjrgc4/10/

Solution 4 - On the left, float children and empty the container to keep the flow of documents up and running.

Demo : http://jsfiddle.net/w3sjrgc4/11/

+1


source






More articles:


All Articles