css - ionic 图标可消除间距

如何删除离子图标顶部和底部的间距？

我在我的html中使用它，例如：

<div><i className="close ion-ios-close-empty" /></div>

这是所有离子子的默认样式：

display:inline-block;
font-family:"Ionicons";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
font-size: inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale

而关闭类如下：

.close{
   color: #ffffff;
   font-size: 50px;
}

我没有添加任何样式，只是增加了字体大小，但是图标显示在照片上。

有什么方法可以消除顶部和底部的间距？

最佳答案

稍后，但是我的解决方案是将行高设置为0.6 em：

.close{
   color: #ffffff;
   font-size: 50px;
   line-height: 0.6em;
}

这更像是一种变通方法，但是如果您使用line-height属性玩一点点，则可以获得良好的结果。

提示：如果要选择阴影，请使用文本阴影而不是方框阴影。

关于css - ionic 图标可消除间距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40584893/