按钮在换行时看起来很糟糕

Question

我有一个小问题。当我的按钮不适合表格单元格时，线条会被破坏。但新行中的按钮看起来很糟糕（“粘在”按钮上方，如图中所示）。如何让它至少有一些整齐的上边距，从顶部按钮“解开”它？！

以下是一个例子：

以下是代码：

<a href="#" class="btn btn-default"><i class="fa fa-info-circle"></i> Szczegóły</a>                        
<a href="#" class="btn btn-default"><i class="fa fa-key"></i> Uprawnienia</a>                     
<a href="#" class="btn btn-default"><i class="fa fa-edit"></i> Edytuj</a>                    
<a href="#" class="btn btn-danger"><i class="fa fa-trash-o"></i> Usuń</a> <!-- this button looks bad -->   

Answer 1

a.btn{
display:inline-block;
margin-bottom:10px;
}

Answer 2

为什么使用table-cell？我建议显示：inline-block;

.container {
  margin-left: -20px;  
}
.element {
  display: inline-block;
  margin-right: -4px;
  margin-left: 20px;
  margin-top: 10px;
}

Answer 3

尝试添加此CSS？

.fa {
    margin-bottom: 10px;
}