删除文本下方输入字段中不需要的空格

Question

我的html中有一个像这样的输入字段：

输入字段的CSS：

.form-control-1 {
  display: block;
  margin: 0 auto;
  width: 30%;
  height: 50px;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
  color: #555;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border: 0px solid black;
  border-bottom: 1px solid black;
  transition: width 1s;
  outline: none;
}

CSS覆盖了移动视口中的一些CSS规则（＆lt; 768px）：

.m-form-control-1 {
  width: 100% !important;
  line-height: 0 !important;
  padding: 0 !important;
}

我现在遇到的问题是我似乎无法删除占位符“用户名”与输入字段的边框底部之间的空格line-height:0和padding:0。

我也尝试过底部保证金的负值。例如。 margin-bottom:-5%但它仍然不起作用？

如何删除不需要的空间？

注意：我在移动视图中只遇到此问题。 （小于768px）

JS小提琴： https://jsfiddle.net/quwswery/

Answer 1

将height:auto设为form-control-1，或者您也可以删除身高。

.m-form-control-1 {
  width: 100% !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin-bottom: -5% !important;
}

.form-control-1 {
  display: block;
  margin: 0 auto;
  width: 30%;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
  color: #555;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  border: 0px solid black;
  border-bottom: 1px solid black;
  transition: width 1s;
  outline: none;
}

<input autocomplete="off" type="text" class="m-form-control-1 form-control-1" id="username" name="username" data-ng-model="username" data-ng-minlength="8" data-ng-maxlength="20" data-ng-pattern="[0-9a-zA-Z]+" required data-ng-focus="disableUsernameWarning()"
  data-ng-blur="enableUsernameWarning()" data-ng-required placeholder="Username" />