页面出现空白区域

有个表单出现空白区域，单独看样式，怎么看都不正确

1. 问题现象

其中代码如下

 <div class="container">
	<h4>*联系人</h4>
	<input class="name"  placeholder="最长不超过50字符" maxlength="50" />
</div>

样式如下：

h4 {
  height: 0.62rem;
  max-height: 0.62rem;
  font-size: 0.22rem;
  line-height: 0.7rem;
}
input {
  width: 100%;
  height: 0.46rem;
  box-sizing: border-box;
  padding-left: 0.2rem;
  font-size: 0.22rem;
  line-height: 0.48rem;
  border-radius: 0.06rem;
  border: 1px solid rgba(175, 202, 241, 0.3);
  outline: 0;
 }

2.问题定位

唯一有问题的就是font-size可能导致原因

3. 解决方案

.container {
    font-size: 0.22rem;
 }