http://anonoz.com/armesh//contact_form/
上記のリンクは、私が作成しているお問い合わせフォームを示しています。右の写真のようにしようと思っています。 「今日お試しください」というテキストに20pxのmargin-top
を付ける必要があります。
HTML:
<body>
<div id="form_container">
<div id="form_body">
**<span class="form_head">Try us Today</span>**
<br/>
<span class="form_subhead">30 day money back gurantee</span>
<form id="enquiry_form" method="post" action="scripts/contact-form-handler.php">
<input type="text" name="name" id="name" value="Name" />
<input type="text" name="contact" id="contact" value="Contact Number" />
<input type="text" name="e-mail" id="email" value="Email" />
<input id='submit_button' type="submit" value="Get Your Space - NOW" />
</form>
</div>
</div>
<img src="form2.jpg"/>
</body>
CSS:
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
}
CSSは、.form_head
divに対して#form_body
20pxをプッシュする必要がありました。しかし、何も起こりませんでした。 FirebugとChrome開発者ツールを試しましたが、なぜこれが発生するのかわかりませんでした。また、フォームの高さに一致するように#form_body
divの高さを設定してみました。 .form_headをプッシュダウンする余地がありますが、それでも機能しません。
私はコーディングを始めて3か月になりますが、この種の問題に直面することがよくあります。私はいつも、それを成し遂げるためにいくつかの位置決めコードを単にキー入力することによって自分の道をハックします。
しかし、今日は同じことをしたくありませんが、なぜこれが起こっているのか、そしてそれを適切な方法で解決する方法を理解したいと思います。誰かが光を当てて、これについて私に教えてくれませんか?
<span>
要素のデフォルトのdisplay
プロパティはinline
です。 inline
要素は、特にマージンやパディングの影響を受けません。
.form_head
にdisplay:block
またはdisplay:inline-block
を指定するだけです。
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
display:block; /* Add this */
}
そのCSSルールをスパンに適用しています。スパンはインライン要素です。 divのようなブロックレベルの要素に変更するか、CSSルールにdisplay:block
またはdisplay:inline-block
を追加します。
display:blockプロパティを使用する必要があります。これがあなたのコードです:
.form_head {
display:block;
margin-top: 20px;
color:#58585a;
font-size:22px;
}
あなたは試すことができます
display:block;
または、padding-top
の代わりにmargin-top
を実行できますか、それともtop
を検討しましたか?