formタグの上や下に隙間（空白）が空いてしまう

フォームを作成するとき、tableタグを使用するととても便利ですが、tdタグ内にformタグを入れると、formタグの上や下に謎の空白ができることがあります。これは、ブラウザによるもので、formタグの前後に自動改行が入ってしまうことに起因します。これを解決するためにはformのmarginを0にします。

CSSコード

form {
   margin:0;
}

余談ではありますが、かなり昔この空白を無くすためにtableのtrタグとtdタグの間にformタグを入れるという荒業があった頃が懐かしいです。これは正しくない構造で、CSSが一般的に広まってない頃に流行っていました。

できるだけ、formタグはtableタグの外に設定するようにしてください。しかし、最近はテーブルではなくliタグを使用してあたかもテーブルのように見せる手法も多く出てきましたね。