Text vertikal in Texteingabefeld einordnen

Question

Ich benutze Foundation 6 Framework, um meine Seiten zu erstellen. Ich habe ein eigenes Stylesheet namens effects.css, das ich benutze, um Text und Tabellen und Eingaben und so anzupassen.

Ich muss es eigentlich stylen, denn ohne die benutzerdefinierten Stile sind die Eingabefelder riesig und grotesk. Müssen einige skalierte Stile in der Foundation.css sein, die dafür verantwortlich sind.

Ich habe ein kurzes, dünnes Texteingabefeld erstellt, aber der darin enthaltene Text scheint nicht korrekt ausgerichtet zu sein. Der Cursor blinkt auf und erscheint halb im weißen Textbereich.

Hier ist der html:

<form name="quick-connect" id="quick-connect" method="post" action="/ajax/quick-connect-action/" onsubmit="return false;"> 
    <span class="med-text white-text">Your name:</span><input type="text" name="name" id="name" class="small-input" /> 
    <span class="med-text white-text">Your phone #:</span><input type="text" name="number" id="number" class="small-input" /> 
    <input type="submit" name="submit" id="quick-connect-submit" value="Submit" /> 
    <input type="hidden" name="page" value="LCHG" /> 
</form> 

Hier ist mein Versuch, die Eingabefelder auf css'ing:

input.small-input{ 
    width:10em; 
    height:1em; 
    line-height:1em; 
    font-size:.9em; 
    color:#000; 
} 

Hier ist, wie es aussieht:

Das Blinken Textcursor wird nicht vertikal innerhalb des Textfelds ausgerichtet.

Answer 1

Es war ein Padding-Problem. Ich setze das Padding innerhalb des Eingabestils auf 0, und der Text wird jetzt korrekt vertikal ausgerichtet.

input.small-input{ 
    width:10em; 
    height:2em; 
    line-height:2em; 
    font-size:.8em; 
    color:#000; 
    padding:0; 
}