###前提・実現したいこと
html css を用いて、背景の中にメールアドレスを入力するフォームと送信ボタンを上下に並べて設置したいと考えています。
###発生している問題・エラーメッセージ
以下のように記述したところ、メールフォームと送信ボタンのそれぞれ上部に不要な余白(以下画像内赤枠参照)が表示されてしまいます。
chromeの検証ツールで確認してもpaddingやmarginが発生しているようには見受けられず、原因がわかりません。
原因および対処法をご教示頂きたく、よろしくお願いいたします。
###該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <link rel="stylesheet" href="style.css"> 5 <meta charset="utf-8"> 6 <title>aaa</title> 7 </head> 8 <body> 9 <section class="requestArea"> 10 <form> 11 <input type="text" name="touroku_mail" class="mail_form" value="" placeholder="メールアドレスを入力" > 12 <input type="image" name="submit" class="btn01" value="" src="btn01.png"/> 13 </form> 14 </section> 15 </body> 16</html> 17
css
1@charset "UTF-8"; 2 3 .requestArea { 4 display: block; 5 background-color: #0b0b0b; 6 } 7 8 .mail_form { 9 display: block; 10 text-align: center; 11 background-color: #ffffff; 12 margin-left: auto; 13 margin-right: auto; 14 width: 80%; 15 } 16 17 .btn01{ 18 display: block; 19 margin-left: auto; 20 margin-right: auto; 21 } 22 23input { 24 margin: 0; 25 padding: 0; 26} 27 28form { 29 margin: 0; 30}
###試したこと
以下のようなサイトを参照し原因を探ってみましたが、解消できませんでした。
http://www.promeshi.com/archives/1137
###補足情報(言語/FW/ツール等のバージョンなど)
表示ブラウザは全て最新です。
よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー