9

http://anonoz.com/armesh//contact_form/

上面的链接显示了我正在制作的联系表格。我试图让它像右边的图片。我必须将文本“Try us Today”设置margin-top为 20 像素。

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_head20px 向下推到#form_bodydiv 上。然而什么也没发生。我什至尝试过 Firebug 和 Chrome 开发者工具，但不知道为什么会这样。我还尝试将#form_bodydiv 的高度设置为与表单的高度相匹配，以便 .form_head 有向下推的空间，但它仍然无法正常工作。

我已经编码 3 个月了，我经常遇到这种类型的问题。我总是通过简单地输入一些定位代码来解决问题。

但是，我今天不想做同样的事情，而是想了解为什么会发生这种情况以及如何以正确的方式解决它。有人可以解释一下并教育我吗？

4

4 回答 4

20

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

更多阅读：
“块”和“内联”之间的区别
与显示有什么区别：内联块？

于 2013-05-08T08:02:30.327 回答
1

你可以试试

display:block;

或者你可以做padding-top而不是margin-top，或者你考虑过top吗？

于 2013-05-08T12:54:42.130 回答
1

你必须使用 dispaly: block 属性。这是您的代码：

.form_head {
    display:block;
    margin-top: 20px;
    color:#58585a;
    font-size:22px;  
}
于 2013-05-08T08:04:02.753 回答
1

您正在将该 CSS 规则应用于跨度。跨度是一个内联元素。将其更改为块级元素，如 div 或添加display:block或添加display:inline-block到您的 CSS 规则。

于 2013-05-08T08:01:58.840 回答