line-height的定义

Posted 2020-12-04 blogregisterboby

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了line-height的定义相关的知识，希望对你有一定的参考价值。

line-height

定义：

　　即行高，两行文字基线之间的距离

三问：

　　什么是基线？

　　　　形象可理解为字母x的下边缘

　　为什么是基线？

　　　　在css中基线乃各种线的基础

　　需要两行吗？

实例：

技术分享图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .head{line-height:300px;background:gray;text-align: center;}
  /* 此时默认的font-size为浏览器的默认值，因为这个数值偏小，似乎是居中，
  当拉大这个数值时，就会显示出问题，只有font-size为0时，才是真正的居中 */
  .img{height: 200px;vertical-align: middle}
</style>
</head>

<body>
  <div class="head">
    <img src="123.jpg" class="img">
  </div>
</body>
</html>