老师,为什么我li元素里设置字体是23px,为什么浏览器审查元素会显示成30px?

老师,为什么我li元素里设置字体是23px,为什么浏览器审查元素会显示成30px?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    .nav{
    	width: 1100px;
    	height: 100px;
    	background: black;
    	position: absolute;
    	top:50%;
    	left: 50%;
    	margin-top: -50px;
    	margin-left: -550px;
    }
    .nav ul{
    	position: absolute;
    	right: 0;
    	top: 50%;
    	margin-top: -15px;
    }
    .nav ul li{ 
    	float: left;
    	font:23px "微软雅黑",sans-serif;
    	margin-right:40px;
    	margin-left: 30px;
    	display:block;
    }
    .nav ul li a{
    	text-decoration: none;
    	color: #FFFFFF;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
  		<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
  		<ul>
  			<li><a href="#">课程</a></li>
  			<li><a href="#">职业路径</a></li>
  			<li><a href="#">实战</a></li>
  			<li><a href="#">猿问</a></li>
  			<li><a href="#">手记</a></li>
  		</ul>
  </div>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

你好,如果不设置行高的话,line-height是浏览器自己计算出来的,不同的字体大小浏览器计算出来显示的高度也不一致,所以需要自己设置行高。如果想要文字在元素内垂直居中中显示,设置行高与元素高度相等即可。

例如:

http://img1.sycdn.imooc.com//climg/5cf5d1920001af7505510450.jpg

自己可以重新测试下,祝学习愉快!

好帮手慕糖 2019-06-03 10:13:21

同学你好,因为审查元素,查看的值这一行的高度,并不是只有字体,可以设置下行高为23,会发现就是23了哦,例:

http://img1.sycdn.imooc.com//climg/5cf48222000117ba04860239.jpg

http://img1.sycdn.imooc.com//climg/5cf4822d0001585012560585.jpg

希望能帮助到你,欢迎采纳。

祝学习愉快!

  • 提问者 SEO老鼠 #1
    那我有时候要用line-height设置垂直居中呢,怎么办?
    2019-06-03 21:12:24
  • 提问者 SEO老鼠 #2
    这个行高是浏览器默认自带的行高吗?
    2019-06-03 21:34:13
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师