美文网首页
[精华]span标签空白高度计算(px和rem两种方式)

[精华]span标签空白高度计算(px和rem两种方式)

作者: CoderZb | 来源:发表于2020-03-14 15:15 被阅读0次

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

image.png

span标签:空白区域 0.06rem或3px

image.png

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

image.png

解决办法:

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

image.png

相关文章

网友评论

      本文标题:[精华]span标签空白高度计算(px和rem两种方式)

      本文链接:https://www.haomeiwen.com/subject/xycishtx.html