Margin between rows with Skel

Question

I'm using Skel grid system to setup my layout, but I dont understand how to add space between rows.

Here's what my HTML code looks like:

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

As expected, my content display in one line:

[  ROW_1  ][  ROW_2  ][  ROW_3  ]

The problem is that the last row go to a new line if I add a margin to the .element css class.

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

The margin is added, but it brokes the grid system resulting in:

[ ROW_1 ]   [ ROW_2 ]   
[ ROW_3 ]

I think I shouldnt use a css margin properties, but instead using a row/grid on the fly modificator, but all my attempts are unsuccessfull.

I want it to looks like this:

[ ROW_1 ]   [ ROW_2 ]   [ ROW_3 ]

I'm using baseline as boilerplate, and didnt modified any Skel options.

Answer 1

I found my solution.

The code:

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

The explaination:

I was setting up a margin on a Skel row, thus breaking his layout. The solution is to add a new container div around the content, with all the needed margins and css, so the Skel layout is not altered, as the margin is always relative to his parent element. Hope it will help !

Answer 2

Update your CSS like:

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

Width you can control as much as you want.