我们先来看一下行高的概念:
我们可以用前面的调试工具来调试行高(按上下键来更改行高大小):
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行高设置</title>
<style>
a{
/*去掉装饰*/
text-decoration: none;
/*背景颜色*/
background-color: #8A2BE2;
/*前景颜色*/
color: #000000;
display: inline-block;
width: 100px;
height: 40px;
/*居中*/
text-align: center;
/**
* 行高与块无关,若上基线到上边框的高度不够时,
* 之前按平均分配方式分配基线到顶线的高度,
* 现在只能再下基线和下顶线之间增加。
* /
/**
如图所示:
此时的所调到的行高已经为80:
*/
line-height: 16px;
text-align: center;
height: 40px;
}
</style>
</head>
<body>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
<a href="#">标题</a>
</body>
</html>