跨度元素的Margin-Top不起作用？

Question

有人能告诉我我的代码哪里出了错吗？所有的功能都正常，唯一的问题是顶部没有边距。

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

- user1548544

Answer 1

与 div 不同，p ¹ 是 块级 元素，可以在所有四个方向上占据 margin，span² 是 内联 元素，只能水平占据 margin。

来自 规范：

Margin 属性指定了盒子的 margin 区域的宽度。'margin' 简写属性为所有四个边设置 margin，而其他 margin 属性仅设置其各自的边。这些属性适用于所有元素，但是垂直 margin 对于非替换的内联元素没有任何效果。

演示1（由于是内联元素，因此未应用垂直margin）

解决方案？将您的元素设置为display: inline-block;或display: block;。

演示2

建议您使用display: inline-block;，因为它既是内联元素又是块级元素。仅将其设置为block会导致您的元素在另一行上呈现, 因为块级元素在页面上占据100%的水平空间，除非它们被设置为inline-block或者它们被left或right浮动。

---

1. 块级元素 - MDN来源 2. 行内元素 - MDN资源

- Mr. Alien

---

最好的解释给初学者。非常感谢@Mr.Alien。 - Tapesh Patel

Answer 2

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

position: relative;
top: 25px;

- Freelancer Mahmud

---

虽然这并没有回答问题，但是是解决问题的好方法！ - Bruce

Answer 3

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

- Egli Becerra

Answer 4

span是一个内联元素，不支持垂直边距。应该将边距放在外部的div上。

- Mr Lister

Answer 5

标签不支持 margin 和 padding，您需要添加一些CSS样式并将您的标签设置为block或inline-block以使用标签的margin和padding，但最好的方法是使用div标签。

span{ display:inline-block or block;}

- Alijon Jumanazarov

Answer 6

永远记住一件事：我们不能在内联元素上垂直应用外边距。如果您想要应用垂直外边距，则需要将其显示类型更改为块级元素或内联块级元素

span {
    display: inline-block;
}

- Danny