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 change CSS id property depending upon screen size

    showing
    inside :before element

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    How can I make a fluid width header with text-overflow ellipsis without wrapping?

    How slow is * css selector for mobile browsers?

    how to set width of a div in percentage minus certain pixels using javascript or css

    How to put border bottom only on last-child of dropdown menu

    How to apply Javascript conditionally on a specific css-class only?

    How do you change the modal link color in Foundation?

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    How to center parts of a list efficiently with CSS [Img Inside]

    How to use dp to calculate shadows - web development HTML CSS

    How to make form line up?

    how to change a css background onclick

    How do I keep an element from pushing another element in CSS?

    DotNetNuke Skinning: How do I use\add skin.css?

    How to add elements to an specified position without influence of other elements?

    how to load a css for Safari only?

    How to add a border bottom like the image?

    jquery hide/show list elements from ul

    How can I compute a percentage based margin with LESS css?

    How to solve position issue in ie7 using html and css?

    How to set an auto minimum width on column with css?

    How to loop this css slider animation?

    How-to set background-position-x?

    How to break a table with CSS diagonally or vertically?

    How to set dynamic responsive divs with only CSS (no javascript)?

    How to change table width using css

    How to do responsive text overflow with css?

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery