在列表行之间留出空间

Question

所以,我有一个显示的项目列表inline-block.我喜欢的是当你点击一个单元格时,它下面的线条会下降.问题是,简单地添加一个margin-bottom不会起作用,就像这个小提琴一样.

看,应该打开的那个单独留在她的线上.我想要的是这样的:

任何的想法？

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/