使用html5/css堆叠字体符号并对齐字体周围的空格

我尝试在固定位置插入一个符号，并使用字体符号在其上堆叠另一个符号。但是字体周围的间距阻止了我这么做。（注意符号来自unicode字体）

到目前为止，我已经尝试过调整z索引和行高，这使我能够调整元素和字体占用的总空间的高度，但它们仍然没有对齐。我尝试过调整定位或垂直对齐。字体本身还可以进行哪些对齐修改

代码如下：

#back
{
font-size: 15em;
font-weight:100;
line-height:1.15em;
height:0.9em;
padding: 0;
margin: 0;
border: 1px solid black;
vertical-align: bottom;  
 z-index:300; 
 position:fixed; 
 top:155px; 
 background-color:white;
 }

#front {
font-size: 15em;
font-weight:100;
line-height:1.15em;
height:0.9em;
padding: 0;
margin: 0;
border: 1px solid black;
vertical-align: bottom;
 z-index:1000; 
 position:fixed; 
 top:165px;
 left:30px; 
 background-color:white;
 }

---

图标在实际字体本身中偏移。考虑到它们在这方面本质上是“文本”，您可以通过使用属性来抵消它们

请注意，您的代码段有许多不正确的选择器，例如ID选择器中省略了hastag。但是，我假设您正在尝试将卡与它们的框对齐，并且您正在查找大约

186px

的值

下面是一个简单的示例，展示了这一点：

*{
字体系列：“Segoe UI”，Frutiger，“Frutiger Linotype”，“Dejavu Sans”，“Helvetica Neue”，Arial，无衬线；
}
h1{
字号：15em；
字号：100；
线高：1.15em；
高度：0.9em；
填充：0；
保证金：0；
边框：1px纯黑；
垂直对齐：底部对齐；
}
#背{
位置：固定；
背景色：白色；
}
#正面{
位置：固定；
左：180像素；
背景色：白色；
}
#后面，前面{
线高：186px；
}

和#127137
🂡

我不确定您想要实现什么，但是有很多方法可以在CSS中定位内容。还有一个

position:relative

，它似乎比

position:fixed

更适合您的应用程序。还有

transform:translate