保证金顶部不适用于span元素？

有人能告诉我我编码错了吗？ 一切正常，唯一的事情就是没有任何保证金。

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">[e-mail]</p></br></br></br></br> <p class="read_more"><a href="underconstruction.html">Read More</a></p> </div> <!-- END CONTACT US --> 

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; } 

Answer 1

不同于div ， p ¹是块级元素，它可以占用所有边上的margin ，因此span ²不能是因为它是仅在水平占用余量的Inline元素。

从规格 ：

保证金属性指定框的边距区域的宽度。 “保证金”速记属性设定了所有四方的保证金，而其他保证金属性仅设置它们各自的一方。 这些属性适用于所有元素，但垂直边距不会对未replace的内联元素产生任何影响。

演示1 （不适用作为span纵向margin是inline元素）

解？ 使你的span元素， display: inline-block; 或display: block; 。

演示2

build议你使用display: inline-block; 因为它将inline以及block 。 只将block设为block会导致元素在另一行上呈现，因为block级元素占据页面上100%的水平空间，除非它们被制成inline-block或者它们floated到left或right 。

---

^{1. 块级元素 – MDN源}

^{2. 内联元素 – MDN资源}

Answer 2

看起来你错过了一些select，尝试添加：

 position: relative; top: 25px; 

Answer 3

span是不支持垂直边距的内联元素。 把边缘，而不是外侧的div 。

Answer 4

span元素display:inline; 默认情况下，你需要使它inline-block或block

改变你的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;*/ }