<!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也是一个相对值,跟物理像素并不一定一一对应。