How to set a margin between nested grids/ rows element in Susy 2

Question

I try to implement a quite simple HTML structure for displaying comments : an avatar is displayed on the left of the comment text like so :

<div class="comment">
     <div class="comment-avatar"><img src="..." /></div>
     <div class="comment-text">Some comment text</div>
</div>

I'm using Susy to make the layout :

.comment-avatar {
    @include span(2);
}

.comment-content {
    @include span(10 last);
}

My problem : I would like to space comment between each other, so I've set

.comment {
   margin-bottom:70px;
}

But that's not effective : sometimes the margin are respected, but when the comment text is long, the margin is not respected (see http://codepen.io/anon/pen/QjrrqP, betweeen latin text and Comment Text 2).

Any advice would be very useful !

Answer 1

You need the comment wrapper to clear it's floated contents. Susy has a clearfix you can use, if you don't have one of your own:

.comment {
  @include susy-clearfix;
  margin-bottom:80px;
}