Skelの行間のマージン

Question

Skelグリッドシステムを使用してレイアウトを設定していますが、行間にスペースを追加する方法が分かりません。ここで

が私のHTMLコードは次のようになります。予想通り

<style> .element{ border: 1px solid black; } </style> 
<!--[...]!--> 
<div class="row"> 
    <div class="element 4u 12u(small)"> ROW_1 </div> 
    <div class="element 4u 12u(small)"> ROW_2 </div> 
    <div class="element 4u 12u(small)"> ROW_3 </div> 
</div> 

、1行の私のコンテンツ表示：

[ ROW_1 ][ ROW_2 ][ ROW_3 ] 

は、問題は、私ならば、最後の行は新しい行に行くということです.element cssクラスに余白を追加します。

<style> .element{ border: 1px solid black; margin: 1em; } </style> 

マージンを加え、それがもたらすグリッドシステムbrokesれる：

[ ROW_1 ] [ ROW_2 ] 
[ ROW_3 ] 

私はCSSのマージンのプロパティを使用するはずの思い、その代わりにフライ改質剤上行/グリッドを使用して、私の試みはすべて成功していません。私はこのようなルックスにそれをしたい

：

[ ROW_1 ] [ ROW_2 ] [ ROW_3 ] 

私は定型としてbaselineを使用しています、とのdidntは、任意のSKELオプションを変更しました。

Answer 1

解決策が見つかりました。

コード：

<style> .element{ border: 1px solid black; margin: 1em;} </style> 
<!--[...]!--> 
<div class="row"> 
    <div class="4u 12u(small)"><div class="element"> ROW_1 </div></div> 
    <div class="4u 12u(small)"><div class="element"> ROW_2 </div></div> 
    <div class="4u 12u(small)"><div class="element"> ROW_3 </div></div> 
</div> 

、について説明：

私はこのように彼のレイアウトを壊し、SKEL行のマージンを設定しました。 解決策は、コンテントの周りに新しいコンテナdivを追加し、必要なマージンとCSSをすべて追加することです。マージンは常に親要素との相対的な関係にあるため、Skelレイアウトは変更されません。 お手伝い願います！

Answer 2

アップデートのようなあなたのCSS：あなたが好きなだけを制御することができます

.element{ border: 1px solid black; float:left; width:32.9%;} 

幅。