2017年06月 / 05月≪ 123456789101112131415161718192021222324252627282930≫07月

インフォメーション

FC2ブログで画像等を一括アップロードするソフトを地味に配布してます。
FC2ブログ用ファイルアップロードの最新版はこちら
(ベクター)FC2ブログ用ファイルアップロード

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 |  --:--  |  スポンサー広告  |  Top↑

2010.02.28 (Sun)

フォームが入ってるテーブルの縦幅がぴっちりしない

フォームが入ってるテーブルの縦幅がなぜか広がってた。
結論を先に言うとformタグにはmargin-bottomがデフォルトで設定されている為。
formのmargin-bottomを0にしてあげればおk


ためしにformを赤枠で囲いつつ検証してみる。
例えばこんなhtml

<html>
<body>
<table border=2>
<tr><td>あああ</td>
<td>いいい</td>
<td>
<input type="submit" value="submit">
</td>
</tr>
</table>

<table border=2>
<tr><td>あああ</td>
<td>いいい</td>
<td>
<form action="./index.php" method="get" style="border: solid 1px #F00;">
<input type="submit" value="submit">
</form>
</td>
</tr>
</table>

</body>
</html>


こんな風に表示される。
uw000021.jpg
なんかボタンの下に空間できた。

margin-bottom:0;を指定してみると

<html>
<body>
<table border=2>
<tr><td>あああ</td>
<td>いいい</td>
<td>
<input type="submit" value="submit">
</td>
</tr>
</table>

<table border=2>
<tr><td>あああ</td>
<td>いいい</td>
<td>
<form action="./index.php" method="get" style="border: solid 1px #F00; margin-bottom: 0;">
<input type="submit" value="submit">
</form>
</td>
</tr>
</table>

</body>
</html>

表示。
uw000022.jpg
ぴっちりした。

地味に引っかかる罠だ。


 |  13:16  |  パソコン  |  トラックバック(0)  |  コメント(0)  |  Top↑

Comment

コメントを投稿する

URL
コメント
パス  編集・削除するのに必要
非公開  管理者だけにコメントを表示
 

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。