在列表行之间留出空间

Question

所以，我有一个显示inline-block的项目列表。我喜欢的是当你点击一个单元格时，它下面的线条会下降。问题是，只需添加margin-bottom赢得的工作，就像this fiddle所示。

请注意，应该打开的那个单独留在她的线上。我喜欢的是这样的：

有什么想法吗？

Answer 1

inline-block元素的默认对齐方式为baseline，这意味着高和短项目将对齐文本行的底部。如果您提供<li>元素vertical-align: top，我相信您会得到您想要的内容;

li {
    list-style-type: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    margin-top: 4px;
    vertical-align: top; /* added */
}

http://jsfiddle.net/j93H5/3/

Answer 2

您需要为边距底部添加垂直对齐，然后在边缘顶部添加li的垂直空间：

vertical-align: top;
margin-top: 4px;

http://jsfiddle.net/j93H5/1/

正如@Bergi所说，分成多个列表可能是最不方便的方法，而且很可能是更合适的方法，但我们并不真正了解上下文。

Answer 3

您可以使用伪元素推送元素：

li.space:after {
    content: ' ';
    display: inline-block;
    height: 20px;
}

View jsfiddle