title: CSS fixed size margin only between elements
body: <p>This keeps coming up on certain projects and I wanted to see if anyone may have a better solution.</p>
  
  <p>Essentially, I'm trying to have a group of div elements of which all have an equal amount of spacing between them but not around. <strong>The snippet below is an example of what I'm looking for, my hope is someone may have a cleaner solution.</strong></p>
  
  <p>My question here is if anyone has a better solution that may use less css or less HTML elements. The important things to maintain:</p>
  
  <ul>
  <li>Localization compliant - Since we aren't using margin left or right there aren't any weird localization issues in rtl</li>
  <li>Alignment - It shouldn't size to the whole window if it doesn't need to but it should wrap if needed. (see example)</li>
  <li>Spacing - Should be a fixed amount of space between the elements</li>
  </ul>
  
  <p>If you have any ideas I'd love to hear them!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        body {
              background-color: black;
              padding: 30px;
          }
          .inner {
              overflow: hidden;
              margin: 20px 0px;
          }
          .innerMargin {
              background-color: white;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              margin: -10px;
          }
          .innerMargin &gt; div {
              flex: 0 0 20px;
  
              background-color: red;
              margin: 10px;
              height: 20px;
              width: 20px;
          }
          .fixedWidth {
              width: 180px;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inner"&gt;
          &lt;div class="innerMargin"&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="inner fixedWidth"&gt;
          &lt;div class="innerMargin"&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
              &lt;div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>