How can I specify distance between list items?

Question

I want to set a distance of 20px between every single list.

HTML:

<div id="folio">
    <ul>
        <li><img src=""></li>
        <li><img src=""></li>
    </ul>
</div>

CSS:

#folio { width:1200px; }
#folio ul li { width:588px; height:273px; display:inline-block; background:#cf5b6f; border:1px solid #8e1028; list-style:none; }

How can I do this?

Answer 1

As @Paul said, you should add:

#folio ul li{ margin:0 20px 20px 0; vertical-align:top}

Due to using display: inline-block, you should also remove the whitespace in your HTML, like this:

<div id="folio">
    <ul>
        <li><img src=""></li><li><img src=""></li><li><img src=""></li><li><img src=""></li>
    </ul>
</div>

I also added another width and then overflow: hidden to #folio to mask the extra margin.

See: http://jsfiddle.net/Brnsg/3/

Answer 2

folio ul li { margin: 0 20px 20px 0; } should do the trick. Also, correct me if I'm wrong, but with display: inline-block;, should you not also be adding vertical-align: top; to align the boxes?