绝对定位元素上的多余边距

Question

为什么btnow有一些高边距？

它的css是top:0。

.btnowwrap{
	position:relative;
	height:20px;
	background:gold;
}

.btnow{
	position:absolute;
	right:9px;
	top:0;
	cursor:pointer;
	font-size:19px;
	color:#777;
}

<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>&#x267B;</div>
</div>

Answer 1

应用line-height:100%;

.btnowwrap{
	position:relative;
	height:20px;
	background:gold;
}

.btnow{
	position:absolute;
	right:9px;
	top:0;
	cursor:pointer;
	font-size:19px;
	color:#777;
  line-height: 100%;
}

<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>&#x267B;</div>
</div>

Answer 2

该图标位于.get(key)这个空间中是因为该图标的top:0（参见图片）：

使用height

line-height: 1em;

.btnowwrap{
	position:relative;
	height:20px;
	background:gold;
}

.btnow{
	position:absolute;
	right:9px;
	top:0;
	cursor:pointer;
	font-size:19px;
	color:#777;
line-height: 1em;
}

Answer 3

如果您不想减小字体大小，请使用

.btnow {行高：100％}

它将适合。您也可以减小字体大小，但是行高是最好的解决方案。