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

回答

相关问题