web-dev-qa-db-ja.com

CSSマージントップが機能しない

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_headdivに対して#form_body20pxをプッシュする必要がありました。しかし、何も起こりませんでした。 FirebugとChrome開発者ツールを試しましたが、なぜこれが発生するのかわかりませんでした。また、フォームの高さに一致するように#form_bodydivの高さを設定してみました。 .form_headをプッシュダウンする余地がありますが、それでも機能しません。

私はコーディングを始めて3か月になりますが、この種の問題に直面することがよくあります。私はいつも、それを成し遂げるためにいくつかの位置決めコードを単にキー入力することによって自分の道をハックします。

しかし、今日は同じことをしたくありませんが、なぜこれが起こっているのか、そしてそれを適切な方法で解決する方法を理解したいと思います。誰かが光を当てて、これについて私に教えてくれませんか？

csscss3htmlmargin
9
Armesh Singh

<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 */ 
}

もっと読む：
「ブロック」と「インライン」の違い
ディスプレイの扱い：インラインブロック？

18
Jace

そのCSSルールをスパンに適用しています。スパンはインライン要素です。 divのようなブロックレベルの要素に変更するか、CSSルールにdisplay:blockまたはdisplay:inline-blockを追加します。

1
JMWhittaker

display：blockプロパティを使用する必要があります。これがあなたのコードです：

.form_head {
    display:block;
    margin-top: 20px;
    color:#58585a;
    font-size:22px;  
}
1
naresh kumar

あなたは試すことができます

display:block;

または、padding-topの代わりにmargin-topを実行できますか、それともtopを検討しましたか？

1
internetgho5t