title: CSS spacing only between elements when displayed horizontally
body: <p>I have a widget component that dynamically generates a list of top photo contributors. Usually it's in the sidebar, so it stacks the top three photo contributors on top of each other each with a grid of three photos. the layout is similar to other photo widgets that display their contents in a 3 x 3 grid.</p>
  
  <p>Sometimes the widget might be displayed in the main column, so to have the widget readily adapt to a wider space, i have the display property set to inline-block. That way, they can be stacked vertically on the sidebar, and horizontally on the main column. However, I'd like there to be separation between individual contributors when they're layed out horizontally, so i added a margin-right of 10px.</p>
  
  <p>CSS so far - </p>
  
  <pre><code>div {
    display: inline-block;
    margin-right: 10px;
  }
  </code></pre>
  
  <p>So here's the problem - when i include the margin of 10px, for a very small range of window width, the 10px margin causes the widget to collapse to a row of two pics and one below while the remaining photo widgets stay 3x3, because they don't have a margin.</p>
  
  <p>[][][] </p>
  
  <p>to </p>
  
  <p>[][]</p>
  
  <p>[]</p>
  
  <p>how would i get these groups of three pics to have a margin when laid out horizontally, but no margin when laid out vertically?</p>