How do you remove collapsed whitespace between HTML elements?

Question

I have a UL with LIs that will be displayed horizontally using display:inline-block. However, these collapse all whitespace (including newlines and tabs) to a single space between the elements, when I require they be perfectly flush for measurement purposes; I don't want my measurements thrown off by varying sizes of spaces among fonts.

Is there any way to remove whitespace from between these? I need this done without having control of the HTML; this will be for a small proof-of-concept framework that shows it can be made without abusing float

SSCCE: http://jsfiddle.net/nSsTP/

<ul>
    <li>Semantic Cell 1</li>
    <li>Semantic Cell 2</li>
    <li>Semantic Cell 3</li>
    <li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>
<style>
    ul>li{
        background: gray;
        display: inline-block;
    }
</style>

Answer 1

inline-block leaves white-space between elements.

To remove this space, write elements on same line.

Change

<ul>
    <li>Semantic Cell 1</li>
    <li>Semantic Cell 2</li>
    <li>Semantic Cell 3</li>
    <li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>

to

<ul>
    <li>Semantic Cell 1</li><li>Semantic Cell 2</li><li>Semantic Cell 3</li><li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>

Demo here.

OR:

Pure css solution:

ul{font-size:0;}
li{font-size:1rem;}

Demo here.

Answer 2

You can use one more style tag for

ul    
    {      
    font-size: 0;
}

OR

ul>li
    {
         display: inline-block;    
        background: gray;
        float:left;
}

Hope this will really help.

Answer 3

I was trying your code. Your white spaces can be removed if you put your all list items

one by one without hitting an enter....

<ul>
    <li>Semantic Cell 1</li><li>Semantic Cell 2</li><li>Semantic Cell 3</li><li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>

Let me knw if its not working..

Answer 4

Instead of inline-block, you can display them as block elements and use float: left:

ul>li{
    background: gray;
    display: block;
    float: left;
}

Demo