Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?

Die Ausgangssituation: In einem DIV-Block mit Hintergrundfarbe wird ein Formular eingebunden.

Markup:

Code :
1
2
3
4
5

<div id="wrapper">
     <form action="">
           <input type="text" size="10"><input type="submit" value="submit">
     </form>
</div>

Stylesheet:

Code :
1
2
3
4
5
6
7
8

#wrapper {
width:600px;
margin:0 auto;
background:#efefef;
}
input {
margin:0 0 0 5px;
}
Das Ergebnis in den Browsern:

[CSS] Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?-form_modern-browser.jpg (Firefox, Netscape, Opera, Safari, usw.)

[CSS] Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?-form_ie.jpg (IE 6+7)

Lösung:

Den unteren Außenabstand des form-Elements auf null zurücksetzen:

Code :
1
2
3

form {
margin-bottom:0;
}
oder das Block-Element mit display:inline auszeichnen:

Code :
1
2
3

form {
display:inline;
}


mfg Maik