2016-10-18 6 views
5

フォームがdiv内に置かれると、何らかの理由でフォームの下部に余分なスペースが常にあります。どのようにしてその空間を取り除くのですか?フォーム要素の下部にある謎の空白

スタックオーバーフローのコードスニペットでは、実際にはスペースは表示されませんが、それ以外の場合は表示されます。以下のコードはすべてそこにあります。あなたはmargin-bottom: 16pxを持って

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

+2

ここでは再現できない場合は、私たちは手伝ってください。私の野生の推測では、あなたのCSSのどこかに余裕があるということです。デベロッパーツールを使用して、計算されたCSSを確認し、このマージン/パディングがどこから来るかを確認することができます。 –

+0

またはブラウザのデフォルトスタイルの一部になる可能性があります。 CSSをリセットすることを検討したいかもしれません。 – Jacob

+1

@ItayGalコードはすべてここにあります。それは、他の場所では訂正されていないときに、そのようなものを修正するstackoverflowのスニペットのものです。ここに問題のあるページへのリンクがあります:http://chatwithibot.com/testx.php – frosty

答えて

0

。それを削除すると、問題が解決されます。

+0

これはデフォルトである必要があります。なぜなら私はHTMLでそれを定義しなかったからです。 – frosty

+0

CSSリセットを行い、すべてのパディング/マージンを定義することができます。 http://cssreset.com/what-is-a-css-reset/ –

4

あなたがウェブ開発ツール(F12)を参照することができ、あなたがbrowser's default stylesheetで定義されているようform要素は、margin-bottom: 1emが付属していることがわかります:

enter image description here

あなたが定義することで変更することができますあなた自身のマージンルール:

form { margin-bottom: 0; } 
関連する問題