不明白为什么.header-input中设置line-height: .62rem会出现问题，而增加height: .62rem就可以解决问题，原理是什么呢

来源：7-1 Vue项目首页 - header区域开发

wenjiewanlu

2021-03-14

当只设置line-height: .62rem时

.header-input
            flex: 1
            background: #fff
            border-radius: .1rem
            margin-top: .12rem
            margin-left: .2rem
            line-height: .62rem
            color: #ccc

页面展示：
图片描述
当增加height:.62rem后，就可以正常展示，这是为什么呢，详细原因老师能否解答下呢

.header-input
            flex: 1
            background: #fff
            border-radius: .1rem
            margin-top: .12rem
            margin-left: .2rem
            line-height: .62rem
            height: .62rem
            color: #ccc

图片描述