グリッド列レイアウト内にコンテンツを埋め込む

Question

私はZurb Foundationフレームワークを使用してフロントエンド（http://foundation.zurb.com/docs/grid.php）を構築しています。基本レイアウトを問題なく作成しました。

私は、列の中にコンテンツを埋め込む方法について疑問に思っていますか？すべてのコンテンツは、あなたが期待していたように左側に整列していますが、グリッドレイアウトのマークアップをカスタマイズしたり、どこにでもたくさんのラッパーを作成することなく、パディングを作成する方法はありません。例えば

、子要素にパディングやマージンを追加しない理由

.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

を説明するためのマークアップ

<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？何かのように

.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/