css - Margin-Top 不适用于 span 元素？

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

Answer 1

与 div 不同，p ¹ 是 Block Level可以在所有方面占用 margin 的元素，span² 不能，因为它是 Inline仅水平占据边距的元素。

来自 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.

Demo 1 (垂直 ​​margin 未应用，因为 span 是 inline 元素)

解决方案？制作你的 span 元素，display: inline-block; 或 display: block;.

Demo 2

建议您使用 display: inline-block;，因为它将是 inline 以及 block。仅将其设置为 block 将导致您的元素呈现 on another line , 因为 block 级别元素占用页面上 100% 的水平空间，除非它们是 inline-block 或者它们是 floated 到 left 或 right。

---

^{1. Block Level Elements - MDN 来源}

^{2。 Inline Elements - MDN 资源}