CSS :nth-child - 底部的额外间距答案

【问题标题】：CSS :nth-child - extra spacing at bottomCSS :nth-child - 底部的额外间距
【发布时间】：2015-01-20 07:46:32
【问题描述】：

每三个 LI 在底部都有不应存在的额外间距。我已经尝试使用如下所示的 nth-child (odd) 和 (even)，并且还尝试了 li:nth-child(2n+2) 条件，右边距设置为 0px 以防止每个第二个框被移动到下一行。这个空间是从哪里来的？？

CSS

ul.comment-card {
    padding: 0; 
    margin: 0;
    list-style: none;
}
.comment-card li:nth-child(odd) {
    background: #fff;
    display: inline-block;
    height: 300px;
    list-style: none;
    margin: 0 20px 26px 0;
    padding: 30px;
    width: 327px;
}
.comment-card li:nth-child(even) {
    background: #fff;
    display: inline-block;
    height: 300px;
    list-style: none;
    margin: 0 0 26px 0;
    padding: 30px;
    width: 327px;
}
.comment-card li .meta {
    color: #767da1;
    font-weight: 400;
    line-height: 1.4em;
}
.comment-card .meta img {
    position: relative; 
    top: -8px;
}

【问题讨论】：

标签： css css-selectors

【解决方案1】：

.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;    
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}

示例：jsFiddle

【讨论】：

我知道在没有进一步解释的情况下只删除一段代码（即使它有效！）违反了 StackOverflow 的规则和理念。这根本没有建设性......
我错过了“溢出：隐藏；”