title: How to add space between inline-block elements?
body: <p>To be clear, I do not want to <strong>remove</strong> space between inline-block elements - I want to <strong>add</strong> it.</p>
  
  <p>What I want is to have a grid of menu items that could have 2, 3 or 4 items to a line, which I'd like to achieve using media queries.</p>
  
  <p>How can I add space between my li items, but also have <strong>no margin on the left and right sides of each row</strong>? (Padding will not fix this.) Can I achieve this using only CSS?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px;
    font-size: 0;
  }
  #main {
    max-width: 450px;
    margin: 0 auto;
  }
  .item {
    display: inline-block;
    width: 200px;
  }
  .item img {
    width: 200px;
  }
  .clearfix {
    overflow: auto;
  }
  li {
    list-style-type: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
  
    &lt;li class="item clearfix"&gt;
      &lt;a href="project.html"&gt;
        &lt;div class="thumb"&gt;
          &lt;img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis"&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    
    &lt;li class="item clearfix"&gt;
      &lt;a href="project.html"&gt;
        &lt;div class="thumb"&gt;
          &lt;img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis"&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>