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

Question

当只设置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

Answer 1

Dell 2021-03-14 21:25:12

有可能因为内外边距的问题，造成的，height可以更好的完整的约束住高度

• 提问者 wenjiewanlu #1

  类似于这样问题，老师能够给出有效的解决方案，是经验和自己不断尝试出来的结果是么？因为我从我浏览一些css文档并不能得到解答

• Dell 回复 提问者 wenjiewanlu #2

  你把 margin，padding 都清零，即便不加 height 应该也可以了