- ベストアンサー
★CSS★formのmargin
formの上にmarginがデフォルトで入っているようなのですが、 それをとることはできるのでしょうか？ <form action="送信先" method="post" style="margin:0px;"> これを記載しても無理でした。他に方法はありますか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。解決したのかな？？ 下記の簡単な(ウェブ標準)HTMLで、Firefox+firebugで、どの要素が画面上でどこになるかをチェックしてみると良いです。赤はその要素、黄色はマージンです。 formはマージンかありません、form内のpにはマージンがあり、前後のマージンと相殺されていることがわかります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<p>前の行</p> ＿<form action="./"> ＿＿<p> ＿＿＿名前(I)<input type="text" name="name" size="20" value="" tabindex="1" accesskey="I"> <input type="submit" value="送信(S)" tabindex="2" accesskey="S"> ＿＿</p> ＿</form> ＿<p>後ろの行</p> </body> </html>
その他の回答 (2)
formにmargin:0pxを指定してもダメだった時点で「formのmarginじゃない」と気づいてください。 まず間違いなく、上にある要素の下マージンか親要素のパディングです。
お礼
ご連絡ありがとうございます。 そうですよね。 ご指摘ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
その上のブロック要素にマージンがあるのでは？？ 8.3.1 マージンの相殺（Collapsing margins） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#collapsing-margins ) 8.2 周辺領域の例（Example of margins, padding, and borders） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#mpb-examples ) なお、formにはmarginもpaddingもありません。 <form style="position:relative;top:-1em;"> なお、formは内部にブロック要素しか持てません。 <!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact /forms.html#h-17.3 ) <body> <form> <input>は間違い <body> <form> <p> <input>としますから その場合は、内部のブロック要素にマージンがあるのかも・・・
お礼
ご連絡ありがとうございます。 またできていません。。 マージン確認したのですが、見当たりません。
お礼
たびたびご連絡ありがとうございます。 firebugは現在使用しているのですが、それでも分かりません。 もし良かったら下記のご指摘いただけると助かります。 s_img にバックグランドで細長い画像を入れていて、その上にinput type、その横にまた画像になります。 そのinput typeが下にずれてしまうのです。 説明が分かりにくいかもしれませんが、よろしくお願いします。 <div class="s_img"> <div style="margin-left:140px; height:30px; margin-bottom:10px;"> <form name="search_form_top" id="search_form" method="get" action="popindex.php" style="height:30px;"><input name="search" id="search" maxlength="50" size="35" value="" type="text"><input src="img/serch_btn_top.jpg" alt="検索" type="image"> </form> </div> </div>