Get rid of spaces between spans

Get rid of the newlines between the spans. Example:

<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>

Newlines are counted as a space in HTML.


Another way besides njbair's one is to add font-size: 0 to parent element. I prefer this one because it's aesthetically better for tab designing.

Instead of this:

<div id="tabs">
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>

...we can use this:

<div id="tabs" style="font-size: 0;">
    <span id="mytab1">Tab 1</span>
    <span id="mytab2">Tab 2</span>
    <span id="mytab3">Tab 3</span>
</div>

...which looks better :)

Of course, don't forget to define your real font size for tabs.

EDIT:
There's one more way to get rid of spaces: by adding comments.

Example:

<div id="tabs">
    <span id="mytab1">Tab 1</span><!--
    --><span id="mytab2">Tab 2</span><!--
    --><span id="mytab3">Tab 3</span>
</div>

Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.

<div id="tabs" style="letter-spacing:-10px;">
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>

Got this idea thanks to this answer

Tags:

Html

Css

Padding