p标签里有一个12px的文字，但是p标签的高度却是14px，有大佬知道是怎么回事吗？

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置10px的字，发现另一个问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            /* height: 12px; */
            font-size: 10px;
            border: 0;
            transform: scale(1);
        }
    </style>
</head>

<body>
    <p>设置一个10px的文字，但p标签的高度却是14px</p>
</body>

</html>

设置line-height:1 就可以了

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间

修改指定高度即可。

p {
    font-size: 10px;
    transform: scale(1);
    height: 10px;
    line-height: 10px;
}

因为Chrome谷歌浏览器下不支持css字体小于12px

你设置 font-size: 10px; 实际显示的是12px
并且默认line-height值是font-size的1.3倍。所以p标签的高度是14px

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

设置了line-height的问题