空白顶部不工作的span元素?

有人能告诉我我写错了什么吗?一切都在运转，唯一的问题是顶部没有边际。

超文本标记语言:

<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;
}
236602 次浏览
小开

span是一个内联元素，不支持垂直边距。将边缘改为外部div。

小开
最佳答案

与div、p、1不同，它们是块级别元素，可以在四面占据margin，而span2不能，因为它是一个内联元素，只在水平方向占据页边距。

从规范:

边距属性指定框的边距区域的宽度。的 'margin'简写属性设置所有四个边的边距 其他边距属性只设置各自的边。这些 属性适用于所有元素，但垂直边距不适用 对未替换的内联元素的任何影响

演示1(垂直的margin没有被应用，因为span是一个inline元素)

解决方案吗?使你的span元素，display: inline-block;或display: block;。

Demo 2

建议你使用display: inline-block;，因为它将是inline和block。只将其设置为block将导致元素呈现为inline0，因为block级别的元素占用页面上水平空间的100%，除非它们被设置为inline-block，或者它们是floated到left或right。

1. 块级元素 - MDN源

2. 内联元素 - MDN资源

小开

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

看起来你漏掉了一些选项，试着补充:

position: relative;
top: 25px;
小开

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

span {
display: inline-block;
}
小开

<span>tag不接受margin， padding你需要添加一些css样式，并使你的<span>标签为block或inline-block，以便使用margin， padding作为<span>标签，但最好的方法是使用div标签。

span{ display:inline-block or block;}

提交答案