Html CSS margin-top 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16435352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS margin-top not working
提问by Armesh Singh
http://anonoz.com/armesh//contact_form/
http://anonoz.com/armesh//contact_form/
The above link shows a contact form that I am making.
I am trying to make it like the picture in the right. I have to give the text "Try us Today" a margin-topof 20px.
上面的链接显示了我正在制作的联系表格。我试图让它像右边的图片一样。我必须将文本“Try us Today”设置margin-top为 20px。
HTML:
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:
CSS：
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
}
The CSS should have pushed the .form_head20px down against the #form_bodydiv. However nothing happened. I even experimented with Firebug and Chrome developer tools but didn't get a clue why is this happening. I also tried setting the height of #form_bodydiv to match the form's height so there is room for the .form_head to be pushed down but it's still not working.
CSS 应该将.form_head20px 向下推到#form_bodydiv 上。然而什么也没发生。我什至尝试过 Firebug 和 Chrome 开发人员工具，但不知道为什么会发生这种情况。我还尝试设置#form_bodydiv的高度以匹配表单的高度，因此 .form_head 有空间被推下，但它仍然无法正常工作。
I've been been coding for 3 months now and I often face this type of problem. I always hack my way out by simply keying in some positioning codes to get it done.
我已经编码 3 个月了，我经常遇到这种类型的问题。我总是通过简单地键入一些定位代码来完成它。
However, I don't want do the same today, but want to understand why is this happening and how to solve it the proper way. Could someone please shed some light and educate me on this?
但是，我今天不想做同样的事情，而是想了解为什么会发生这种情况以及如何以正确的方式解决它。有人可以对此有所了解并教育我吗？
回答by Jace
<span>elements have a default displayproperty of inline. inlineelements are not affected by margins or paddings, amongst other things.
<span>元素的默认display属性为inline。inline元素不受边距或填充等的影响。
Just give .form_heada display:blockor display:inline-block.
只要给.form_head一个display:block或display:inline-block。
.form_head {
margin-top: 20px;
color:#58585a;
font-size:22px;
display:block; /* Add this */
}
More reading:
The difference between "block" and "inline"
What's the Deal With Display: Inline-Block?
回答by JMWhittaker
You are applying that CSS rule to a span. A span is an inline element. Change it to a block level element like a div or add display:blockor display:inline-blockto your CSS rule.
您正在将该 CSS 规则应用于跨度。跨度是一个内联元素。将其更改为块级元素，如 div 或添加display:block或display:inline-block到您的 CSS 规则。
回答by naresh kumar
you have to use the dispaly: block property. Here is your code :
你必须使用 dispaly: block 属性。这是你的代码：
.form_head {
display:block;
margin-top: 20px;
color:#58585a;
font-size:22px;
}
回答by internetgho5t
You could try
你可以试试
display:block;
or you could do padding-topInstead of margin-top, or have you considered top?
或者你可以做padding-top而不是margin-top，或者你有没有考虑过top？
