Css 边距顶部不适用于跨度元素？

有人能告诉我我编码错了什么吗？一切都在运转，唯一的问题是顶部没有利润

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

---

span

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

div

上。

与

div

不同，

p

1是可以在所有边上占据

margin

的元素，

span

2不能，因为它是只水平占据边距的元素

从：

边距属性指定方框边距区域的宽度。这个 “margin”速记属性设置所有边的边距，而 其他页边距属性仅设置其各自的边。这些 属性应用于所有图元，但垂直边距将不具有 对未替换的内联元素的任何影响

（垂直

margin

不适用于

span

是

内联
元素）

解决方案？使您的
span
元素，
显示：内联块或<代码>显示：块


建议您使用
display:inline块将是
内联的
以及
块
。将其设置为
block
只会导致您的元素进行渲染，因为
block
级别元素占据页面上
100%
的水平空间，除非它们是
内联块
或
浮动到
左侧
或
右侧


1.-MDN源

2.-MDN资源
span
元素为
显示：内联默认情况下，您需要将其设置为
内联块
或
块

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

看起来您错过了一些选项，请尝试添加：

position: relative;
top: 25px;

始终记住一件事：我们不能将边距垂直应用于内联元素。如果要应用垂直边距，请将其显示类型更改为
块
或
内联块

span{
显示：内联块；
}
虽然这不能回答问题，但却是解决问题的好办法！完美解决方案此解决方案非常有效！