Margin-Top不能用于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">info@e-mail.com</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;
}   

与¹不同div，p ¹是可以在所有面上使用的块级元素margin，span²不能像Inline元素那样仅在水平方向上使用边距。

从规格：

边距属性指定框的边距区域的宽度。'margin'速记属性设置所有四个边的边距，而其他margin属性仅设置它们各自的边。这些属性适用于所有元素，但是垂直边距对未替换的嵌入式元素不会有任何影响。

演示1（垂直margin不施加为span是一个inline元件）

解？制作您的span元素，display: inline-block;或display: block;。

演示2

建议您使用display: inline-block;它，因为它inline也一样block。block仅使它成为可能会导致您的元素在另一行上呈现，因为block关卡元素占据100%了页面上的水平空间，除非它们是制成的inline-block或者是floatedto left或right。

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

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

您似乎错过了一些选择，请尝试添加：

position: relative;
top: 25px;

span是不支持垂直边距的内联元素。将边距放在外部div。

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

永远记住一件事，我们不能在行内元素上垂直应用边距，如果要应用，则将其显示类型更改为块或行内块。例如span {display：inline-block;}