div盒子行高和高度一样,里面的文字鼠标选中后背景超出盒子一点点是什么原因?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
        }

        header{
            height: 90px;
        }

        div{
            height: 500px;
            line-height: 500px;
            background-color:red;
        }

        span{
            background-color:grey; opacity: 0.7; 
            font-size: 120px;
        }
    </style>
</head>
<body>
    <header></header>
    <div>
    <span>你好World</span>
    </div>
</body>
</html>

image.png

div盒子行高和高度一样,但是字体被鼠标选中后超出红色盒子的那一点点蓝色区域(最下面那一块蓝色的)是什么东西呢?

待解决 悬赏分:20 - 离问题结束还有
反对 0举报 0 收藏 0

我来回答

回答3