2016-10-18 4 views
5

Wenn ein Formular in ein div eingefügt wird, gibt es aus irgendeinem Grund immer zusätzlichen Platz am unteren Rand des Formulars. Wie werden wir diesen Raum los?Mystery White Space am unteren Rand des Formularelements

In den Code-Schnipsel von Stack-Überlauf zeigt es nicht tatsächlich den Speicherplatz, aber anderswo tut es. Der Code unten ist alles, was es gibt.

div { 
 
    border: 1px solid blue; 
 
} 
 
form { 
 
    border: 1px solid red; 
 
}
<div> 
 
    <form> 
 
    Form 
 
    </form> 
 
</div>

+2

Wenn Sie es hier nicht reproduzieren können, können wir nicht helfen. Meine wilde Vermutung ist, dass Sie irgendeinen Rand irgendwo in Ihrem css definiert haben. Sie können die Entwicklerwerkzeuge verwenden, um das berechnete CSS zu überprüfen und zu sehen, wo dieser Rand/Abstand von –

+0

kommt. Oder es könnte Teil der Standardstile für Ihren Browser sein. Vielleicht möchten Sie einen CSS-Reset durchführen. – Jacob

+1

@ItayGal Der Code ist alles hier. Es ist nur etwas mit stackoverflow-Schnipsel, das solche Dinge korrigiert, wenn es nirgendwo anders korrigiert wird. Hier ist ein Link zu der Seite mit dem Problem: http://chatwithibot.com/testx.php – frosty

Antwort

0

Sie haben eine margin-bottom: 16px. Entfernen Sie es und es wird Ihr Problem lösen.

+0

Das muss standardmäßig sein. Weil ich es nicht im HTML definiert habe. – frosty

+0

Sie können einen CSS-Reset durchführen und alle Abstände/Ränder definieren. http://cssreset.com/what-is-a-css-reset/ –

4

können Sie beziehen sich auf Web-Entwickler-Tools (F12), und Sie werden sehen, dass ein form Element mit einem margin-bottom: 1em kommt, wie in der browser's default stylesheet definiert:

enter image description here

Sie, dass außer Kraft setzen kann durch die Definition Ihre eigene Randregel:

form { margin-bottom: 0; } 
Verwandte Themen