Border and background inside of padding margin, with Bootstrap columns
<p>I have repeating rows/columns setup with Bootstrap's grid system. I want to create padding between these elements, but have their border and background reside inside of that padding. I have tried using margin but that jacks with Bootstrap's grid layout on the column level.</p>

<p>The below is a very trimmed down version of what I'm working with, which illustrates the point. I would like to modify this so that the blue border hugs the white inner box, and you don't see any red (in my case it would show up behind text). I need to achieve this without modifying the essential html layout of what's there already, so relying just on CSS.</p>

<p>To clarify what I'm going after... I want to add padding between the rows &amp; columns. If I just straight add padding to the outer div (as exists below) the border and background color extend outside of that padding. I want the border and the background color to exist within the boundaries of the padding I add.</p>

<p>I have tried using a variety of box-sizing settings to no avail, as well as all manner of padding/margin I could think of.</p>

<p>JSFiddle: <a href="https://jsfiddle.net/2v94yg2s/" rel="nofollow">https://jsfiddle.net/2v94yg2s/</a></p>

<p>HTML</p>

<pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="grid-data row"&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="col-md-4"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.grid-data {
  padding: 15px;
}

.grid-data  &gt; div {
  padding: 15px;
  height: 50px;
  border: 1px solid blue;
  background-color: red;
}

.grid-data  &gt; div &gt; div {
  background-color: white;
  height: 100%;
  width: 100%;
}
</code></pre>