输入图片描述
从上面的图片中可以看到，我在"我"上插入了一个鼠标。徽标，但它一直在文本下留下一点空白，有没有办法消除这一点?
UPDATE: UPDATE PICTURE
现在我遇到的问题是，当我在第三行上尝试post时，它会推送"我"下面的文本
更新了
下面的代码
label {
display: inline-block;
width: 84px;
}
span#typePrompt {
display: block;
line-height: 1;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
span# {
display: block;
line-height: 1;
}<td style="width: 253.55pt; border-top: none; border-left: none; border-bottom: 1pt solid #c9c9c9; border-right: 1pt solid #c9c9c9; background: #ededed; padding: 0cm 5.4pt; height: 16.7pt; vertical-align: top;">
<p style="line-height: normal; font-size: 15px; font-family: 'Calibri',sans-serif; margin: 0cm;"><strong><span style="font-size: 19px; color: black;">
<span>Max Reach </span><div class="tooltip">
<span>Ⓘ</span><span class="tooltiptext">Maximum cable distance for SR modules is 2m</span>
</div></span></strong></p>
</td>将Ⓘ嵌套在自己的span中，并将line-height: 1;设置为display: block;。
label {
display: inline-block;
width: 84px;
}
span#typePrompt {
display: none;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip > span.info {
display: block;
line-height: 1;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/*for SO demo */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}<body>
<td style="width: 261.95pt; border-top: 1pt solid #c9c9c9; border-left: none; border-bottom: 1.5pt solid #c9c9c9; border-right: 1pt solid #c9c9c9; padding: 0cm 5.4pt; height: 16.7pt; vertical-align: top;">
<span>Max Reach </span>
<div class="tooltip"><span class="info">Ⓘ</span><span class="tooltiptext">Maximum cable distance for SR modules is 2m</span>
</div>
</body>工作原理完全相同…
label {
display: inline-block;
width: 84px;
}
span#typePrompt {
display: block;
line-height: 1;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
span.info {
display: block;
line-height: 1;
}<td style="width: 253.55pt; border-top: none; border-left: none; border-bottom: 1pt solid #c9c9c9; border-right: 1pt solid #c9c9c9; background: #ededed; padding: 0cm 5.4pt; height: 16.7pt; vertical-align: top;">
<p style="line-height: normal; font-size: 15px; font-family: 'Calibri',sans-serif; margin: 0cm;"><strong><span style="font-size: 19px; color: black;">
<span>Max Reach </span><div class="tooltip">
<span class="info">Ⓘ</span><span class="tooltiptext">Maximum cable distance for SR modules is 2m</span>
</div></span></strong></p>
</td>