Problem z formularzem, duże odstępy między polami w pionie Opcje

[axmaster]

Witam!
Chciałbym stworzyć prosty formularz (pozwoliłem go sobie zilustrować rysunkiem), ponieważ układ pól i podpisów ma duże znaczenie:



Stworzyłem kod formularza:

[HTML] pobierz, plaintext 
<form id="pobdb">
<br>    
<label>id klienta<input name="pole1" id="pole1" value="1.0001" /></label>
<label>nr telefonu<input name="pole2" id="pole2" value="510100100" /></label>
</br>
<br>    
<label>imię<input name="pole3" id="pole3" value="1.0001" /></label>
<label>nazwisko<input name="pole4" id="pole4" value="510100100" /></label>
</br>
<br>    
<label>pesel<input name="pole5" id="pole5" value="89164928933" /></label>
<label>dokument tożsamości<input name="pole6" id="pole6" value="ABC123453" /></label>
<label>nr pin<input name="pole8" id="pole7" value="1234" /></label>
</br>
</form>​
[HTML] pobierz, plaintext 

oraz stosowny styl CSS

[HTML] pobierz, plaintext 
input {
    display: inline-block;
    width: 6em;
    position: relative;
    top: -3em;
}
label {
    display: inline-block;
    width: 6em;
    margin-right: .5em;
    padding-top: 1.5em;
}
 
[HTML] pobierz, plaintext 

Wyszło mi coś takiego:




Niestety ogległości między podpise, a polem imput w linii poniżej jest za duża (czerwona strzałka, chciałbym podnieść 2 linie pól conajmniej do poziomu czrnej linii ra rysunku, innymi słowy zmniejszyć odeległosć o co najmniej połowę. Czy możecie pomóc i podpowiedzieć gdzie i jak zmodyfikować CSS-a aby rzeczony efekt osiągnąć.

[!*!]

Obrazki się nie wczytują. Poza tym "em" nie używa się do wysokości elementów, a rozmiaru fontu. Jak poprawisz obrazki, wrzuć też to na http://jsfiddle.net/ a zamiast znacznika BR, obejmij te elementy w div i to jemu daj odstęp.

Ten post edytował !*! 22.02.2012, 10:32:47