Question

The inline-block list items have constant spaces between them by default if the margin is same for all directions. My question is, how can we increase this space BETWEEN list items if we have to using CSS?

Answer 1

With an horizontal padding? padding-left:5px , padding-right:5px;

Or you can use relative positioning and a distance from left:

ul li:nth-child(2) { /* second item */
    position:relative;
    left:5px;
}
ul li:nth-child(3) { /* third item */
    position:relative;
    left:10px;
}
ul li:nth-child(4) { /* fourth item */
    position:relative;
    left:15px;
}

And so on…