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 ] 

문제는 마지막 행은 새로운 라인으로 이동한다는 것입니다 경우 I .element css 클래스에 여백을 추가하십시오.

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

마진이 추가하지만 결과 그리드 시스템 brokes된다

[ ROW_1 ] [ ROW_2 ] 
[ ROW_3 ] 

내가 CSS를 마진 속성을 사용 야해 생각하지만, 대신 플라이 modificator에 행/그리드를 사용하여, 하지만 내 모든 시도는 성공하지 못했습니다.

나는 같은 외모에 원하는 : 나는 상용구로 baseline을 사용하고, 그리고 didnt가 어떤 skel이 옵션을 수정

[ ROW_1 ] [ ROW_2 ] [ ROW_3 ] 

.

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> 

explaination :

나는 따라서, skel이 행에 여백을 설정하는 자신의 레이아웃을 파괴했다. 해결 방법은 필요한 모든 여백과 CSS가있는 콘텐츠 주위에 새로운 컨테이너 div를 추가하는 것이므로 스킨 레이아웃은 변경되지 않습니다. 여백은 항상 부모 요소에 상대적입니다. 도움이 되길 바랍니다.

Answer 2

업데이트처럼 CSS : 당신은 당신이 원하는만큼을 제어 할 수 있습니다

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

폭.