Question

上面的链接显示了我正在制作的联系表单。我试图让它像右边的图片。我必须提供“今天试试我们”的文字{20}的margin-top。

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个月了，我经常遇到这种类型的问题。我总是通过简单地键入一些定位代码来完成它。

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

Answer 1

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

更多阅读：
The difference between "block" and "inline"
What’s the Deal With Display: Inline-Block?

Answer 2

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

Answer 3

你必须使用display：block属性。你的代码在哪里：

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

Answer 4

你可以尝试

display:block;

或者您可以padding-top代替margin-top，还是考虑过top？

CSS margin-top无效

4 个答案: