Margin-Top 不适用于 span 元素?

新手上路,请多包涵

有人可以告诉我我编码错了什么吗?一切正常,唯一的问题是顶部没有边距。

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

原文由 user1548544 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 473
2 个回答

Unlike div , p 1 which are Block Level elements which can take up margin on all sides, span 2 cannot as it’s an Inline 仅在水平方向占据边距的元素。

规格

边距属性指定框边距区域的宽度。 ‘margin’ 简写属性设置所有四个边的边距,而其他边距属性只设置它们各自的边。这些属性适用于所有元素,但垂直边距不会对非替换内联元素产生任何影响。

演示 1 (垂直 margin 未应用为 spaninline 元素)

解决方案?制作你的 span 元素, display: inline-block;display: block;

演示 2

建议您使用 display: inline-block; 因为它将是 inline 以及 block 。制作它 block 只会导致你的元素 在另一行 上呈现,因为 block 水平元素采用 100% ,除非它们在页面上制作水平空间-- inline-block 或者它们是 floatedleft 或者 right .


  1. 块级元素- MDN 源

  2. 内联元素- MDN 资源

原文由 Mr. Alien 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

 position: relative;
top: 25px;

原文由 Freelancer Mahmud 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题