CSSマージントップが動作しない

http://anonoz.com/armesh//contact_form/CSSマージントップが動作しない

上記のリンクは、私が作成している連絡フォームを示しています。私はそれを右の写真のようにしようとしています。私は今日「お試しください」の文字をmargin-top、20pxにしなければなりません。

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：CSSは#form_body div要素に対して.form_head 20ピクセル押し下げているはず

.form_head { 
    margin-top: 20px; 
    color:#58585a; 
    font-size:22px; 
}

。しかし何も起こらなかった。私はFirebugとChromeデベロッパーツールを試してみましたが、なぜこれが起こっているのかを知ることはできませんでした。私はまたフォームの高さに一致するように#form_body divの高さを設定しようとしました。.form_headが押し下げられる余地がありますが、まだ動作していません。

私は今3ヶ月間コーディングされており、この種の問題に直面することがよくあります。私はちょうどそれを行うためにいくつかの位置コードを入力するだけで、常に自分の道をハックする。

しかし、私は今日同じことをしたくないのですが、なぜこれが起こっているのか、それをどうやって正しい方法で解決するのかを理解したいと思います。誰かが光を放ち、これについて私に教育してもらえますか？

出典

2013-05-08 Armesh Singh

デフォルトのh1、h2 ...スタイリングを防ぐためにスパンに配置しました。私はいつもそれを達成するためにポジションメソッドを使用しますが、それは私のスルーをハッキングするようなものです。他の方法はありますか？最も重要なのは、なぜそれが起こっているのか知りたいのですが？ –

[なぜこのCSSマージントップスタイルが機能しないのですか？]（http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work） –

<span>要素のデフォルト値はdisplayで、inlineです。 inline要素は、とりわけ、マージンやパディングの影響を受けません。

.form_headdisplay:blockまたはdisplay:inline-blockとします。

.form_head { 
    margin-top: 20px; 
    color:#58585a; 
    font-size:22px; 
    display:block; /* Add this */ 
}

もっと読み：ブロックプロパティ：
The difference between "block" and "inline"
What’s the Deal With Display: Inline-Block?

出典

2013-05-08 08:02:30 Jace

インライン要素が影響を受けないという事実は決して知られていません。 –

@ArmeshSinghまた、 'inline-block 'プロパティもあります。これは' inline'と 'block'の混合物のようなものです。要素の種類は 'inline'要素のように動作しますが、幅、高さ、余白、およびパディングを変更できます。私は 'inline-block'に関するいくつかの情報への別のリンクを使って答えを更新しました。 – Jace

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

出典

2013-05-08 08:01:58 JMWhittaker

ワウ今、それは働いています。ありがとうございました。しかし、インライン要素がそのように動作する理由を私に説明できますか？ –

@ArmeshSingh私は私の答えでより多くの読書のためのリンクを持っています。 – Jace

ありがとう、ジェイス私はそれを読むだろう。 –

あなたはdispalyを使用する必要があります。

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

出典

2013-05-08 08:04:02

あなたは

display:block;

を試みることができるか、あなたが代わりにmargin-topのpadding-topを行うことができ、またはあなたがtopを検討している：ここにはあなたのコードですか？

出典

2013-05-08 12:54:42 internetgho5t

CSSマージントップが動作しない

答えて

関連する問題