Get rid of spaces between spans

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>

Leave a Comment