How to specify the distance between list items?

Question

I want to set a distance of 20 pixels between each 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 the use of display: inline-block you must also remove spaces in your HTML, for example:

 <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 in #folio to hide the extra margin .

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

Answer 2

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