Question

I have the following html/css code:

HTML

<div id="statusSteps">
    <span class="step complete">step 1</span>
    <span class="step complete">step 2</span>
    <span class="step complete">step 3</span>
    <span class="step">step 4</span>
    <span class="step">step 5</span>
</div>​

CSS

#statusSteps {
    display: inline-block;
    border: 1px solid black;
    padding: 0px;
    margin: 0px;
}

.step {
    display: inline-block;
    text-align: center;
    border-right: 1px solid black;
    padding: 0px 15px;
    font-weight:bold;
}

.step:last-child {
    border-right: none;
}

.complete {
    background-color: LightGray;
}​

I created a JSFiddle to play around with it: http://jsfiddle.net/wMShU/

In the browsers I tried (Firefox, IE9, and Chrome) there is a white area on the left side of step 1 and step 2.

Does anyone know a nice clean way to have those steps with the gray background fill the whole area?

Answer 1

The solution by Miljan Puzović works, but then you may remove display: inline-block entirely (floated elements are all implicitly display: block).

The cause of your issue is that inline-block elements are influenced by whitespace on the markup. If you remove the whitespace between the <span> tags (which will make your code look ugly), the white margin will go away.

See demo.