Маржа между строками с 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> 

Как и ожидалось, мой отображения контента в одной строке:

[ ROW_1 ][ ROW_2 ][ ROW_3 ] 

Проблема заключается в том, что последняя строка перейти на новую строку, если я добавьте маркер в класс .element css.

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

Маржа добавляется, но файлов нарушает подвесную систему, что приводит к:

[ ROW_1 ] [ ROW_2 ] 
[ ROW_3 ] 

Я думаю, что я не должен использовать маржинальный CSS свойства, но вместо того, чтобы с помощью ряда/сетки на лету модификатором, но все мои попытки не увенчались успехом.

Я хочу, чтобы это выглядит так:

[ ROW_1 ] [ ROW_2 ] [ ROW_3 ] 

Я использую baseline как шаблонный, и техника его подводит модифицировали варианты 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%;} 

Ширина вы можете контролировать столько, сколько вы хотите.