首页 > css font-size问题?

css font-size问题?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            line-height:16px;
            font-size:16px;
            margin:0;
            padding:0;
        }

        /* p{
            line-height:0.58em;
            font-size:16px;
            margin:0;
            padding:0;
        } */
    </style>

</head>
<body>
    <p>xxxx</p>
    <p>xxxx</p>
</body>
</html>

为什么字体的高度和line-height设置为0.58em时候的高度差不多,而不是和line-height设置为16px一样高?font-size的16px的字体大小是指什么的大小?

图一(line-height:16px font-size:16px)

图二(line-height:0.58em font-size:16px)


em相对大小,应该是为了兼容ie的,如果不考虑ie,可以直接都用px,1em = 16px


font-size:16px;指的就是行内元素默认的line-height值
em是一个相对单位,相对于父元素设置的font-size的大小为1em

line-height和font-size构成了行内元素的行高
(line-height:0.58em font-size:16px) 行高比font-size设置的高度小
形成的行高高度为((160.58-16)/2)2+16,行高就是9.28

(line-height:16px font-size:16px) 行高和font-size设置的高度一样
形成的行高高度为((16-16)/2)*2+16,行高就是16

(line-height:24px font-size:16px) 行高比font-size设置的高度高
形成的行高高度为((24-16)/2)*2+16,行高就是24


line-height是设置行高,font-sizi设置字体大小,浏览器默认的字体大小是16px。行高与高度相同能使文本垂直居中,font-sizi控制字体大小


任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。浏览器的16px,值得就是屏幕上的16px,px也是一个相对值,跟物理像素并不一定一一对应。

【热门文章】
【热门文章】