How can I specify distance between list items?

Tags: html,css

Problem :

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?

---

Solution :

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/