使用css在字体图标行之间创建空间

我有一个选择部分，我有多个很棒的字体图标，选择的图标下面有一个条。 只要我只有一行图标就行了。当我有多行时，“选定栏”不再可见，因为下面的图标将其隐藏。 我对css不是很在行，尝试了我能想到的所有填充和边距，但没有太大成功。在附带的JSFIDLE中，您可以看到最后两个图标的选择器，但第一个图标的选择器不存在

我应该向下面的css添加什么，这样我就可以有多行图标，并且仍然可以看到选择栏

.icon-picker {
   border: 0px solid #000000;
   margin-right: 5px;
   width: 24px;
   height: 24px;
   background-color: #FFFFFF;
   padding-bottom: 4px;
}

.selected {
   border-left: 0px;
   border-right: 0px;
   border-top: 0px;
   border-bottom: 2px solid #000000;
}

.icon-container {
   display: inline-block;
   vertical-align: middle;
   padding-top: 4px;
   padding-left: 15px;
   max-width: 300px;
}

谢谢你抽出时间

---

您需要将

标记为块元素，以便将宽度和高度应用于元素

看

---

除了anpsmn的回答之外，简单地给容器一个更高的

行高度也应该这样做。为了得到最干净的结果，我最后这样做了，并引用了上面@CBroe的评论。
.icon-picker {
    border: 0px solid #000000;
    display: inline-block;
    margin-right: 5px;
    width: 24px;
    background-color: #FFFFFF;
}