Margin-Top 不适用于 span 元素？答案

【问题标题】：Margin-Top not working for span element?Margin-Top 不适用于 span 元素？
【发布时间】：2012-07-26 21:50:31
【问题描述】：

谁能告诉我我的编码错误吗？一切正常，唯一的问题是顶部没有边距。

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

【问题讨论】：

标签： css margin html

【解决方案1】：

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

【讨论】：

【解决方案2】：

不像div, p ¹ 是Block Level 元素，可以在所有方面占用margin，span² 不能，因为它是一个 Inline 元素，它只在水平方向占据边距。

来自specification：

Margin 属性指定框的边缘区域的宽度。这 'margin' 速记属性设置所有四个边的边距，而其他边距属性仅设置它们各自的一侧。这些属性适用于所有元素，但垂直边距不会对非替换内联元素的任何影响。

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 到@987654347 @ 或right。

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

^{2。 Inline Elements - MDN 资源}

【讨论】：

【解决方案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;*/
}

【讨论】：

【解决方案4】：

您好像漏掉了一些选项，请尝试添加：

position: relative;
top: 25px;

【讨论】：

虽然这并不能回答问题，但却是一个很好的解决问题的办法！

【解决方案5】：

永远记住一件事：我们不能将边距垂直应用于内联元素。如果要应用垂直边距，请将其显示类型更改为 block 或 inline-block

span {
    display: inline-block;
}

【讨论】：

【解决方案6】：

<span>tag 不接受 margin, padding 您需要添加一些 css 样式并将您的 <span> 标签设置为 block 或 inline-block 以便使用 margin, @987654328 @ 代表<span> 标签，但最好的使用方式是div 标签。

span{ display:inline-block or block;}

【讨论】：