Question

I have the following page structure:

<span>content01</span>
<span>content02</span>
<span>content03</span>
<br/>
<span>content04</span>
<span>content05</span>
<span>content06</span>
<br/>
<span>content07</span>
<span>content08</span>
<span>content09</span>
<br/>
...

As a result my data looks like a table with three columns.
The content of each span tag is some one word. But this looks crooked because all the words are different and have different lengths. And I want to have the same distance between the columns in each row. My problem could be easily solved by using a table tag or wrapping each span in a single div. But I want to achieve the desired result only by using CSS. Is this possible? For example I tried to use the following:

span {
    width: 60px;
    height: 20px;
    padding: 40px;  
}

Or the following:

span {
    width: 60px;
    height: 20px;
    margin: 40px;  
}

But it doesn’t work…

Thanks in advance!

Answer 1

The display property on the span tag should be **inline-block**, because span tags are inline by default, and we need it to act as a block as well.

So simply change inline into inline-block, like so:

span {
    width: 60px;
    height: 20px;
    margin: 40px;
    display:inline-block;    
}

Live demo: http://jsfiddle.net/mAX59/

Reference: http://reference.sitepoint.com/html/span