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

Question

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

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