CSS - removing horizontal space in list menu using display: inline property

Question

I'm new to CSS and have a set target of learning & publishing my website in CSS by the end of the month.

My question:

I'm trying to build a CSS horizontal menu with hover drop downs, however, when I use the display: inline property with li (list) items, I get horizontal spaces between the li (list) items in the bar. How do I remove this space?

Here is the HTML:

<div id="tabas_menu">
    <ul>
        <li id="tabBut0" class="tabBut">Overview</li>
        <li id="tabBut1" class="tabBut">Collar</li>
        <li id="tabBut2" class="tabBut">Sleeves</li>
        <li id="tabBut3" class="tabBut">Body</li>
    </ul>
</div>

And here is the CSS:

#tabas_menu {
    position: absolute;
    background: rgb(123,345,567);
    top: 110px;
    left: 200px;
}

ul#tabas_menu {
    padding: 0;
    margin: 0;
}

.tabBut {
    display: inline;
    white-space: 
    list-style: none;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1)));
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1));
    font-family: helvetica, calibri, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5);
    -moz-border-radius: 0.3em;
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    -webkit-border-radius: 0.3em;
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
    padding: 6px 18px;
    border: 1px solid rgba(0,0,0,0.4);
    margin: 0;
}

I can get the space removed using the float: left/right property but it's bugging me as to why I cannot achieve the same effect by just using the display property.

Answer 1

I had a remarkably similar question a couple weeks ago.

The horizontal spaces are perfectly reasonable. Between inline elements, whitespace matters. This makes perfect sense when you consider the following markup under generic styles:

<b>Label:</b> <span>content</span>

Wouldn't you feel frustrated if this content rendered as the following?

Label:content

The prevalence of block elements in HTML spoils us into forgetting about the role of whitespace. But we must remember that whenever using inline elements (including inline-block elements), that whitespace in the markup actually does matter since HTML is fundamentally a markup and not a coding language.

There a a few solutions to your problem (assuming you want to hold onto the whitespace in the HTML for aesthetic reasons—if this is not important, just remove the space and be done with it), the easiest of which is to apply font-size: 0px to the parent container and then restore the font size to font-size: 16px or whatever it is in each of the inline elements. This makes it so that the text nodes between them have a font size of zero.

Answer 2

The problem is some browsers will render the white space between list items. For example:

<li>item 1</li>
<li>item 2</li>

There is a newline (and probably some tabs) after the </li> on the first line and before the <li> on the next line. Some web browsers will render this as a space. There are two workarounds.

One is to remove all these spaces, like so:

<ul>
    <li id="tabBut0" class="tabBut">Overview</li><li id="tabBut1" class="tabBut">Collar</li><li id="tabBut2" class="tabBut">Sleeves</li><li id="tabBut3" class="tabBut">Body</li>
</ul>

This is a kind of ugly solution, but it works.

The other possibility is what you mentioned yourself -- use float: left. Personally, I always go with the float solution.