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 ¹其是块级别这可能需要长达元件margin在所有侧上,span²不能因为它是一个内联水平地只占用边缘元件.

从规格:

边距属性指定框的边距区域的宽度.'保证金'速记属性设定所有四边的保证金,而其他保证金属性仅设定各自的边.这些属性适用于所有元素,但垂直边距不会对未替换的内联元素产生任何影响.

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

解？制作你的span元素,display: inline-block;或display: block;.

演示2

建议你使用display: inline-block;,因为它将是inline如此block.使得它block只会导致你的元素将另一条线路上,作为block级元素采取100%在页面上的横向空间,除非它们是由inline-block或者他们floated来left或right.

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

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

Answer 2

看起来你错过了一些选项,尝试添加:

position: relative;
top: 25px;

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

Answer 4

span是一个不支持垂直边距的内联元素.把边距放在外面div而不是.

Answer 5

<span>tag 不接受 margin,padding你需要添加一些 css 样式并使你的<span>标签为block或inline-block才能使用margin,padding为<span>标签，但最好的使用方式是divtag.

span{ display:inline-block or block;}