in unerwünschten Raum entfernen Eingabefeld unten Text

Question

Ich habe wie diese ein Eingabefeld in meinem html:

CSS für Eingabefelder:

.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, die einige der CSS überschreibt Regeln oben definiert, in der mobilen Ansichtsfenster (< 768px):

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

Das Problem, das ich jetzt habe, ist, dass ich den Abstand zwischen dem Platzhalter "Benutzername" und dem unteren Rand des Eingabefelds mit line-height:0 und padding:0 nicht entfernen kann.

Ich habe auch versucht, einen negativen Wert für den unteren Rand. Z.B. margin-bottom:-5% aber es funktioniert immer noch nicht?

Wie kann ich den unerwünschten Speicherplatz entfernen?

Hinweis: Ich habe nur dieses Problem in der mobilen Ansicht. (< 768px)

JS Fiddle:https://jsfiddle.net/quwswery/

Answer 1

Set height:auto zu form-control-1 oder Sie können Höhe entweder entfernen.

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