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

[Maik]

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:

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

Stylesheet:

#wrapper {
width:600px;
margin:0 auto;
background:#efefef;
}
input {
margin:0 0 0 5px;
}

Das Ergebnis in den Browsern:

(Firefox, Netscape, Opera, Safari, usw.)

(IE 6+7)

Lösung:

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

form {
margin-bottom:0;
}

oder das Block-Element mit display:inline auszeichnen:

form {
display:inline;
}

mfg Maik