title: Padding content inside grid column layout
body: <p>I am using the Zurb Foundation framework to build the front-end (http://foundation.zurb.com/docs/grid.php) and I have created my basic layout fine, no problems.</p>
  
  <p>What I am wondering about is how to pad the content inside the columns? All the content is aligned to the left side as you'd expect, but I can't see a way to create a padding without either customising the grid layout markup, or creating lots of wrappers everywhere.</p>
  
  <p>For example, the markup</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="eight columns customise-the-grid"&gt;
        &lt;p&gt;My main content&lt;/p&gt;
        &lt;ul&gt;&lt;li&gt;My item&lt;/li&gt;&lt;/ul&gt;
        &lt;!-- other various content --&gt;
      &lt;/div&gt;
      &lt;div class="four columns"&gt;
        &lt;div class="or-create-a-wrapper"&gt;
          &lt;p&gt;My main content&lt;/p&gt;
          &lt;ul&gt;&lt;li&gt;My item&lt;/li&gt;&lt;/ul&gt;
          &lt;!-- other various content --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Some css to illustrate</p>
  
  <pre><code>.customise-the-grid{
    padding: 10px;
  }
  .or-create-a-wrapper{
    padding: 10px;
  }
  </code></pre>