如何在Susy 2中设置嵌套网格/行元素之间的边距

Question

我尝试实现一个非常简单的HTML结构来显示评论：评论文本左侧显示的是头像，如下所示：

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

我正在使用Susy制作布局：

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

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

我的问题：我想在彼此之间发表评论，所以我已经设置了

.comment {
   margin-bottom:70px;
}

但这没有效果：有时候保证金得到尊重，但是当评论文本很长时，保证金不受尊重（请参阅http://codepen.io/anon/pen/QjrrqP，拉丁文本和评论文本2之间）。

任何建议都非常有用！

Answer 1

您需要comment包装器来清除它的浮动内容。如果您没有自己的，可以使用Susy clearfix：

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