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/


    CSS Howto..

    how to solve slideshow css problem?

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    How to Make a Banner Image?

    how to middle vertical-align using bootstrap input-group

    How to use metro css with codeigniter?

    How to add only those script and css files necessary to views with partial views [closed]

    CSS: how to remove the indent of list items shown in Firefox

    how to read content in a webpage that doesn't appear in page source

    How do I use Stylish to change the font in Google Tasks?

    How to add a value in the y-axis at the bottom of a bar chart-css

    How avoid zurb founction styles from overriding jqgrid/jquery ui styles?

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How to prevent CSS declaration dropped errors cross browser?

    How to get a white outline around an image in CSS

    How to create dropdown menu that appears based on answer from another dropdown menu

    How to change text-selection styles with javascript [duplicate]

    How to add code area css style to HTML

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    How to resize the width of div left to another which has float:left;?

    How to use css to display an avatar pic with details next to it?

    How to make text-overflow with ellipsis work with long strings that have no breaks

    How to conditionally load CSS and extend it using SASS/SCSS

    How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other

    Dynamic HTML 3 layers nested quotes - how to do?

    how to use !important in jQuery animate() function

    How to adopt drop down menu for mobile devices? [closed]

    How to position text on image using position as absolute while container width being in percent

    How to provide CSS properties for Different browsers like Mozilla and Chrome

    jQuery - Navbar hover did not show