• ベストアンサー

★CSS★formのmargin

formの上にmarginがデフォルトで入っているようなのですが、 それをとることはできるのでしょうか? <form action="送信先" method="post" style="margin:0px;"> これを記載しても無理でした。他に方法はありますか?

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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">&nbsp;<input type="submit" value="送信(S)" tabindex="2" accesskey="S"> __</p> _</form> _<p>後ろの行</p> </body> </html>

a-----n
質問者

お礼

たびたびご連絡ありがとうございます。 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>

その他の回答 (2)

noname#158634
noname#158634
回答No.2

formにmargin:0pxを指定してもダメだった時点で「formのmarginじゃない」と気づいてください。 まず間違いなく、上にある要素の下マージンか親要素のパディングです。

a-----n
質問者

お礼

ご連絡ありがとうございます。 そうですよね。 ご指摘ありがとうございました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

その上のブロック要素にマージンがあるのでは?? 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>としますから その場合は、内部のブロック要素にマージンがあるのかも・・・

a-----n
質問者

お礼

ご連絡ありがとうございます。 またできていません。。 マージン確認したのですが、見当たりません。

関連するQ&A