CSS margin-top not working

http://anonoz.com/armesh//contact_form/CSS margin-top not working

上面的鏈接顯示了我正在創建的聯繫表單。我想讓它像在右邊的圖片。我必須給文本「今天試試我們」一個012px的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：

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

的CSS應該有推.form_head 20像素下來攻擊#form_body股利。然而沒有發生。我甚至嘗試過使用Firebug和Chrome開發者工具，但沒有弄清楚爲什麼會發生這種情況。我也嘗試將#form_body div的高度設置爲與表格的高度相匹配，以便有足夠的空間讓.form_head壓低，但仍然無法使用。

我一直在爲3個月編碼，而且我經常遇到這種類型的問題。我總是通過鍵入一些定位代碼來完成它，從而破解我的出路。

但是，我不想今天做同樣的事情，但想知道爲什麼會發生這種情況，以及如何正確解決這個問題。有人可以請一些光和教育我這個？

來源

2013-05-08 Armesh Singh

我把它放在一個範圍內以防止默認的h1，h2 ...造型。我總是使用位置方法來完成它，但這就像是在扼殺我。有沒有其他方法？最重要的是，我想知道它爲什麼會發生？ – 2013-05-08 07:57:02

[爲什麼這個CSS margin-top樣式不起作用？]（http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work） – 2016-03-17 03:44:21

<span>元素的默認display屬性inline。除其他外，元素不受邊距或襯墊的影響。

只要給.form_head a display:block或display:inline-block。

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

來源

2013-05-08 08:02:30 Jace

我從來不知道內聯元素不受影響 – 2013-05-08 08:09:02

@ArmeshSingh是的，這裏也有'inline-block'屬性，這是'inline'和'block'之間的混合。該元素的行爲類似於「inline」元素，但您可以修改其寬度，高度，邊距和填充。我用另一個鏈接來更新我的答案，以獲取關於'inline-block'的一些信息。 – Jace 2013-05-08 08:11:07

您正在將該CSS規則應用於跨度。 span是一個內聯元素。將其更改爲塊級元素（如div）或將display:block或display:inline-block添加到您的CSS規則中。

來源

2013-05-08 08:01:58 JMWhittaker

哇，現在它工作。謝謝。但是，你能否向我解釋爲什麼內聯元素以這種方式表現？ – 2013-05-08 08:04:51

@ArmeshSingh我有一個鏈接，在我的答案更多的閱讀。 – Jace 2013-05-08 08:05:19

謝謝傑斯我會讀它。 – 2013-05-08 08:08:16

你必須使用dispaly：塊屬性。這裏是你的代碼：

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

來源

2013-05-08 08:04:02

你可以嘗試

display:block;

，或者你可以做padding-top相反的margin-top，或者你認爲top？

來源

2013-05-08 12:54:42 internetgho5t

CSS margin-top not working

回答

相關問題