CSS边距顶部不起作用答案

【问题标题】：CSS margin-top not workingCSS边距顶部不起作用
【发布时间】：2013-05-02 08:51:43
【问题描述】：

上面的链接显示了我正在制作的联系表格。我试图让它像右边的图片。我必须给文本“Try us Today”一个 20px 的 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 个月了，我经常遇到这类问题。我总是通过简单地输入一些定位代码来解决问题。

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

【问题讨论】：

我将它放在一个跨度中以防止默认的 h1,h2... 样式。我总是使用位置方法来完成它，但这就像破解我的方法。还有其他方法吗？最重要的是，我想知道为什么会这样？
Why does this CSS margin-top style not work?的可能重复

标签： css html margin

【解决方案1】：

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

【讨论】：

哇，现在它开始工作了。谢谢你。但是你能向我解释一下为什么内联元素会这样吗？
Jace 链接了一个很好的资源，Mozilla Block level elements 也是一个很好的阅读资源。花点时间了解元素在页面上的显示方式是值得的。当您开始使用定位和浮动时，这将是关键。

【解决方案2】：

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

【讨论】：

我从来不知道内联元素不受影响这个事实
@ArmeshSingh 是的，还有inline-block 属性，它是inline 和block 之间的混合体。该元素的行为类似于inline 元素，但您可以修改其宽度、高度、边距和填充。我用另一个链接更新了我的答案，指向有关inline-block 的一些信息。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你可以试试

display:block;

或者您可以使用padding-top 而不是margin-top，或者您是否考虑过top？

【讨论】：