麻烦老师帮忙看一下代码的正确性和规范性

具体遇到的问题

报错信息的截图

尝试过的解决思路和结果

老师，我设置了span的margin-top：20px；为什么没有效果呢，请老师解答一下谢谢你。

图片描述

粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aboutPlus4_10</title>
    <link rel="stylesheet" href="css/aboutPlus4_10.css">
</head>
<div class="content">
    <img src="images/b1.jpg" alt="">

    <div class="text">
        <span>Library</span>
        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p class="p2">
            Lorem Ipsum has been the industry's standard dummy test ever since the 1500s, when an unknown printer took a galley of type and scrambled to make a type specimen book.
        </p>
        <div class="btn">EXPLORE</div>
    </div>
    <img src="images/b2.jpg" alt="">
    <div class="text">
        <span>Library</span>
        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p class="p2">
            Lorem Ipsum has been the industry's standard dummy test ever since the 1500s, when an unknown printer took a galley of type and scrambled to make a type specimen book.
        </p>
        <div class="btn">EXPLORE</div>
    </div>
    <div class="text">
        <span>Library</span>
        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p class="p2">
            Lorem Ipsum has been the industry's standard dummy test ever since the 1500s, when an unknown printer took a galley of type and scrambled to make a type specimen book.
        </p>
        <div class="btn">EXPLORE</div>
    </div>
    <img src="images/b3.jpg" alt="">
    <div class="text">
        <span>Library</span>
        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p class="p2">
            Lorem Ipsum has been the industry's standard dummy test ever since the 1500s, when an unknown printer took a galley of type and scrambled to make a type specimen book.
        </p>
        <div class="btn">EXPLORE</div>
    </div>
    <img class="img4" src="images/b4.jpg" alt="">


</div>

<body>

</body>

</html>

* {
    margin: 0;
    padding: 0;
}

.content {
    width: 100%;
    overflow: hidden;
}

img {
    float: left;
    width: 25%;
    height: 380px;
}

.content .text {
    float: left;
    background: #07cbc9;
    width: 25%;
    height: 380px;
    position: relative;
}

span {
    font-size: 24px;
    margin-top: 20px;
    margin-left: 20px;
}

.p1 {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
}

.p2 {
    font-size: 14px;
    color: gray;
    margin-left: 20px;
    margin-bottom: 30px;
}

.btn {
    width: 138px;
    height: 40px;
    background: black;
    color: white;
    text-align: center;
    line-height: 40px;
    margin: 0 auto;
}

日拱一卒_ 2020-11-09

源自：浮动与定位 4-10 自由编程