私は私のhtmlで、このような入力フィールドを持つテキスト

Question

以下の入力欄に不要なスペースを削除します。入力フィールドの

CSS：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を上記のモバイルビューポートで定義されているルール（< 768px）：

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

私が今問題を抱えているのは、プレースホルダー "Username"と入力フィールドのborder-bottomの間のスペースを、line-height:0とpadding:0で取り除くようです。

また、ボトムマージンに負の値を設定しようとしました。例えば。 margin-bottom:-5%まだ動作しませんか？

不要なスペースを削除するにはどうすればよいですか？

注：私はこの問題がモバイルビューでのみ発生します。 （< 768px）

JSフィドル：https://jsfiddle.net/quwswery/

Answer 1

はform-control-1にheight:autoを設定するか、いずれかの高さを削除することができます。

.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" />