一尘不染

Margin-Top不能用于span元素?

html

有人可以告诉我我编码错误吗?一切正常,唯一的是顶部没有裕度。

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

阅读 419

收藏
2020-05-10

共1个答案

一尘不染

不同于divp 1是可以在所有面上使用的块级元素marginspan2不能那样,因为它是仅在水平方向上占用边距的Inline元素。

从规格:

边距属性指定框的边距区域的宽度。’margin’速记属性设置所有四个边的边距,而其他margin属性仅设置它们各自的边。这些属性适用于所有元素,但是垂直边距对未替换的嵌入式元素不会有任何影响。

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

解?制作您的span元素,display: inline-block;display: block;

建议您使用display: inline-block;它,因为它inline也一样block。使得它block只会导致你的元素将_另一条线路上_,作为block级元素采取100%在页面上的横向空间,除非它们是由inline- block或者他们floatedleftright


1. 块级元素-MDN源

2. 内联元素-MDN资源

2020-05-10