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

【问题标题】：Remove unwanted space in input field below text删除文本下方输入字段中不需要的空间
【发布时间】：2017-05-24 20:41:42
【问题描述】：

我的 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;
}

在移动视口 (

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

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

我还尝试为底部边距设置负值。例如。 margin-bottom:-5% 还是不行？

如何删除不需要的空间？

注意：我只在移动视图中遇到这个问题。 (

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

【问题讨论】：

请提供小提琴之类的
@Fribu 完成。正如您将看到的，border-bottom 和我要删除的占位符“用户名”之间有一个不需要的空间。
移除高度
jsfiddle.net/vp47cnjh

标签： html css

【解决方案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" />

【讨论】：

@downvoter，解释你的反对意见，以便我改进我的答案。