Question: I have been working on an updated static version of a website for a client - all tested and works fine - but this was then merged into our developers .net build - the rendered html now has spaces between the drop down boxes and for the life of me I cant figure out why.

They should have identical less compiled CSS and HTML layout I cant see any difference so cannot understand the differences - can anyone save my Friday and shine some light on the issue!?

Static working version - <http://www.liquidclients.co.uk/landsail/ls5b/tyreResult.html>

Live Version **with spacing issues** - <http://landsail.elasticbeanstalk.com/tyreRange>

ie it looks like this - 

![enter image description here](https://i.stack.imgur.com/qf0rQ.png)

rather than this - 

![enter image description here](https://i.stack.imgur.com/bj0bL.png)

for no explicable reason that i can find..

Answer: 
If you do a View Source, you can see the issue is that the compiled version has a blank line between the `css-select-moz` spans.

Compare this in your static version:

```
<div class="margFt">
    <span class='css-select-moz  margFt wshare '>
        <select id="test" class="tst" name="test">
            <option value="SelectBoxIt is:" selected>Width:</option>
            <option value="a jQuery Plugin">a jQuery Plugin</option>
            <option value="a Select Box Replacement">a Select Box Replacement</option>
            <option value="a Stateful UI Widget">a Stateful UI Widget</option>
        </select>
    </span>
    <span class='css-select-moz  margFt wshare'>
        <select id="test" class="tst" name="test">
            <option value="SelectBoxIt is:" selected>Profile:</option>
            <option value="a jQuery Plugin">a jQuery Plugin</option>
            <option value="a Select Box Replacement">a Select Box Replacement</option>
            <option value="a Stateful UI Widget">a Stateful UI Widget</option>
        </select>
    </span>
</div>

```

To your generated version:

```
<div class="margFt">

    <span class='css-select-moz  margFt wshare '>
        <select id="tyre-width"
                data-val="true"
                data-val-required="The WidthUID field is required."
                class="tst"
                name="tyre-width"></select>
    </span>

    <span class='css-select-moz  margFt wshare'>
        <select id="tyre-profile"
                data-val="true"
                data-val-required="The ProfileUID field is required."
                class="tst"
                name="tyre-profile"></select>
    </span>
</div>

```

This is a known problem with whitespace between `display:inline-block` elements. There are some workarounds shown described in [this article and associated comment](http://davidwalsh.name/remove-whitespace-inline-block#comment-61052). I quickly tried the `font-size:0` trick and that did fix it, so this must be the issue.

**UPDATE**

Just playing again, rather than setting `.css-display-moz` to `display:inline:block;`, setting it to `float:left;` renders them much better - they just move slightly to the left but the vertical spacing isn't an issue. This may be something to consider.
```
.rhWrap .regForm {
    margin-top: 17px;
    display: initial;
}

```

it is trying to set display:block; just fix with initial