Css 为字体图标添加顶部填充

我试图只向字体awesome图标添加一些顶部填充，但是如果我将

padding top:10px

或

margin top:10px

设置到

I

元素，它还会向其前面的文本添加填充

有人能帮忙吗

i{
字体大小：30px；
填充顶部：10px；
}
.街区{
背景色：#ccc；
填充：10px；
最大宽度：400px；
文本对齐：居中；
}
.区块编号{
背景色：#000；
颜色：#fff；
填充：10px；
显示：内联块；
字体大小：20px；
}

2至4

我不确定是否可以用其他方法来实现，但在您的情况下，我要做的是绝对定位图标

i{
字体大小：30px；
位置：绝对位置；
填充顶部：8px；
左侧填充：10px；
}
.街区{
背景色：#f1f1；
填充：10px；
最大宽度：400px；
文本对齐：居中；
位置：相对位置；
}
.区块编号{
背景色：#000；
颜色：#fff；
填充：10px；
显示：内联块；
字体大小：20px；
}

2至4

由于

.block number

和font awome

元素都设置为内联块，因此

垂直对齐

将生效，因此您可以将默认值从

基线

更改为

顶部

等

.block-number, i {
  ...
  vertical-align: top;
}
i {
  ...
  padding-top: 10px;
}

另一种方法是使用

位置

和

顶部

分别调整

元素

i {
  position: relative;
  top: 10px;
} 

---

请参阅修订版JSFIDLE。我需要确保所有其他风格都完好无损。但你到底想要实现什么呢？是否要将文本和图标垂直居中？