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 < sup> 2 不能因为Inline元素只能水平占用边距。

来自specification：

边距属性指定框的边距区域的宽度。该 'margin'速记属性为所有四方设定了保证金其他保证金属性仅设定各自的一面。这些属性适用于所有元素，但垂直边距不会对未替换的内联元素的任何影响。

Demo 1（垂直margin未应用span是inline元素）

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

Demo 2

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

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

^{2。 Inline Elements - MDN资源}

Answer 2

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

position: relative;
top: 25px;

Answer 3

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

Answer 4

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 5

永远记住一件事我们无法将边距垂直应用于内联元素，如果要应用然后将其显示类型更改为块或内联块。例如span {display：inline-block;}

Margin-Top不适用于span元素？

5 个答案: