FORMの上下のスペースを調節する
<html><head><title>FORMの上下のスペースを調節する</title></head>
<body>
テーブルタグを使って、上下の文章とフォームの間を空けないようにしています。
<table>
<tr>
<form>
<td>
<input type="text" size="30" name="address">
<input type="submit" value="登録">
</td>
</form>
</tr>
</table>
<br>
スタイルシートを使って、上下の文章とフォームの間を調節しています。
<form style="margin: 6px 0px;">
<input type="text" size="30" name="address">
<input type="submit" value="登録">
</form>
</body>
</html>
普通にフォームを作ると、上下の文章の間にスペースが空いてしまいます。
これは<form>タグがあると自動的に１行空けてしまうからです。こうなるのを防ぐ小ワザを２種類紹介します。
▼テーブルタグを使う方法
<table>
<tr>
<form>
<td>
<input type="text" size="30" name="address">
<input type="submit" value="登録">
</td>
</form>
</tr>
</table>
このように<form>タグを<tr>と<td>の間に配置すると、１行空けるという仕様が取り消されます。もしぴったりくっつけたい場合は<table>タグにcellpaddingなど入れて調整してください。
▼スタイルシートを使う方法
<form style="margin: 6px 0px;">
<input type="text" size="30" name="address">
<input type="submit" value="登録">
</form>
<form>タグにstyleプロパティを入れてスペースを調整します。
style="margin: 6px 0px;"で、縦に５ピクセル、横に０ピクセルの余白を指定しています。
ホームページ作成ガイド
ホームページ作成ガイド