填充网格列布局内的内容

Question

我使用Zurb Foundation框架构建前端（http://foundation.zurb.com/docs/grid.php），并且创建了我的基本布局，没有问题。

我想知道的是如何填充列内的内容？所有的内容都按照你的想法排列在左侧，但是我看不到如何在没有定制网格布局标记的情况下创建填充，或者无处不在创建大量的包装。

例如，标记

<div class="container"> 
    <div class="row"> 
    <div class="eight columns customise-the-grid"> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     <!-- other various content --> 
    </div> 
    <div class="four columns"> 
     <div class="or-create-a-wrapper"> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     <!-- other various content --> 
     </div> 
    </div> 
    </div> 
</div> 

一些CSS来说明

.customise-the-grid{ 
    padding: 10px; 
} 
.or-create-a-wrapper{ 
    padding: 10px; 
} 

Answer 1

是的，这一直是网格系统和非流体设计的问题。不要嘲笑他们，他们肯定对流体设计有其优势，但他们很难与之合作。

我会做的是在你希望填充的元素内的元素上设置一个边距。如果这是有道理的。

<div class="four columns"> 
    <div class="or-create-a-wrapper"><!-- margin here --> 
    <p>My main content</p> 
    <ul><li>My item</li></ul> 
    <!-- other various content --> 
    </div> 
</div> 

OR

<div class="four columns"> 
    <div class="or-create-a-wrapper"> 
    <div class="another-div-yay"><!-- margin here --> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     </div> 
    <!-- other various content --> 
    </div> 
</div> 

Answer 2

为什么不添加填充或保证金的子元素？像

.columns * {margin:0px 10px} 

Answer 3

您可以在父column创建填充的包装。

<div class="container"> 
    <div class="row"> 
    <div class="eight columns customise-the-grid"> 
     <div class="small-12 content-wrapper column"> 
      <p>My main content</p> 
      <ul><li>My item</li></ul> 
      <!-- other various content --> 
     </div> 
    </div> 
    <div class="four columns or-create-a-wrapper"> 
     <div class="small-12 content-wrapper column"> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     <!-- other various content --> 
     </div> 
    </div> 
    </div> 
</div> 
<style> 
.customise-the-grid{ 
    padding: 10px; 
} 

.or-create-a-wrapper{ 
    padding: 10px; 
} 

.content-wrapper{ 
    background-color:lightgray; 
    border-radius: 10px; 
} 
</style> 

这里是一个小提琴： https://jsfiddle.net/mantisse_fr/40cgg84u/