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

与div和p1不同的是，它们是块级元素，可以在所有方面占用边距，而span2不能，因为它是一个内联元素，只在水平方向上占用边距。

从说明书来看:

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

演示1(未应用垂直边距，因为span是内联元素)

解决方案吗?创建span元素，display: inline-block;或显示:block;。

演示2

建议你使用display: inline-block;因为它将内联以及块。如果只将其设置为块，则会导致你的元素在另一行上呈现，因为块级元素占据了页面上100%的水平空间，除非它们被设置为内联块或向左或向右浮动。

1. 块级元素- MDN源

2. 内联元素- MDN资源

<span>标签不接受空白，填充你需要添加一些CSS样式，让你的<span>标签作为块或内联块，以便使用空白，填充<span>标签，但最好的使用方式是div标签。

span{ display:inline-block or block;}

Span是一个不支持垂直边距的内联元素。把边缘放在外部div上。

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

span {
    display: inline-block;
}

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

position: relative;
top: 25px;