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：

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

CSS应该将.form_head 20px推向#form_body div.然而什么都没发生我甚至尝试过Firebug和Chrome开发人员工具,但没有弄清楚为什么会这样.我还尝试设置#form_body div的高度以匹配表单的高度,这样就可以将.form_head推下来但仍然无法正常工作.

我已经编码了3个月了,我经常遇到这种类型的问题.我总是通过简单地键入一些定位代码来完成它.

但是,我今天不想做同样的事,但是想要理解为什么会发生这种情况以及如何以正确的方式解决它.有人可以请一些亮点并教育我吗？

解决方法

<跨度>元素具有内联的默认显示属性.内联元素不受边距或填充等因素的影响.

只需给.form_head一个display：block或display：inline-block.

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

CSS margin-top无效

解决方法

相关文章