Html 边距顶部不适用于跨度元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11700985/
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
Margin-Top not working for span element?
提问by user1548544
Can someone tell me what I coded wrong? Everything is working, the only thing is that there is no margin at the top.
有人能告诉我我编码错误吗？一切正常，唯一的问题是顶部没有边距。
HTML:
HTML:
<div id="contact_us"> <!-- BEGIN CONTACT US -->
<span class="first_title">Contact</span>
<span class="second_title">Us</span>
<p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br>
<p class="e-mail">[email protected]</p></br></br></br></br>
<p class="read_more"><a href="underconstruction.html">Read More</a></p>
</div> <!-- END CONTACT US -->
CSS:
CSS:
span.first_title {
margin-top: 20px;
margin-left: 12px;
font-weight: bold;
font-size: 24px;
color: #221461;
}
span.second_title {
margin-top: 20px;
font-weight: bold;
font-size: 24px;
color: #b8b2d4;
}
回答by Mr. Alien
Unlike div, p1which are Block Levelelements which can take up marginon all sides,span2cannot as it's an Inlineelement which takes up margins horizontally only.
不像div, p1是块级元素，可以占据margin所有边，span2不能，因为它是一个仅在水平方向上占据边距的Inline元素。
From the specification:
从规范：
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
边距属性指定框边距区域的宽度。'margin' 速记属性设置所有四个边的边距，而其他边距属性仅设置它们各自的边。这些属性适用于所有元素，但垂直边距不会对未替换的内联元素产生任何影响。
Demo 1(Vertical marginnot applied as spanis an inlineelement)
演示1（垂直margin不施加为span是一个inline元件）
Solution? Make your spanelement, display: inline-block;or display: block;.
解决方案？制作您的span元素，display: inline-block;或display: block;.
Would suggest you to use display: inline-block;as it will be inlineas well as block. Making it blockonly will result in your element to render on another line, as blocklevel elements take 100%of horizontal space on the page, unless they are made inline-blockor they are floatedto leftor right.
建议您使用，display: inline-block;因为它inline和block. block仅制作它会导致您的元素呈现在另一行上，因为block级别元素会100%占用页面上的水平空间，除非它们被制作inline-block或它们将floated要left或right。
1. Block Level Elements- MDN Source
1.块级元素- MDN 来源
2. Inline Elements- MDN Resource
2.内联元素- MDN 资源
回答by Freelancer Mahmud
Looks like you missed some options, try to add:
看起来您错过了一些选项，请尝试添加：
position: relative;
top: 25px;
回答by Mr Lister
spanis an inline element that doesn't support vertical margins. Put the margin on the outer divinstead.
span是不支持垂直边距的内联元素。把边距放在外面div。
回答by Egli Becerra
spanelement is display:inline;by default you need to make it inline-blockor block
span元素display:inline;默认情况下，您需要制作它inline-block或block
Change your CSS to be like this
把你的 CSS 改成这样
span.first_title {
margin-top: 20px;
margin-left: 12px;
font-weight: bold;
font-size:24px;
color: #221461;
/*The change*/
display:inline-block; /*or display:block;*/
}
回答by Danny
Always remember one thing we can not apply margin vertically to inline elements ,if you want to apply then change its display type to block or inline block.for example span{display:inline-block;}
永远记住一件事，我们不能对内联元素垂直应用边距，如果你想应用，那么将其显示类型更改为块或内联块。例如 span{display:inline-block;}
