采用
display: flex; align-items: center;
的方式没有出现如下问题。本文仅为了研究span标签空白高度计算的问题,所以没有采用这种方式。
由下图可知,文字不在统一水平线上。原因是因为,两个文字的字号(以及标签自身属性)不一样,所以导致两个文字的空白区域的高度不一致。要使两个文字同处于水平位置,可以查看元素,续表悬停在文字上,通过计算顶部空白区域的高度,然后再对靠上的哪个文字设置margin-top,使它靠下一点
image.png
span标签:空白区域 0.06rem或3px

input标签:空白区域 0.02rem 或1px

解决办法:
输入框的文字比较靠近顶部,所以对输入框设置style='margin-top:0.04rem;'
或者 style='margin-top:2px;'

网友评论