line-height 属性设置行间的距离（行高）。注释：不允许使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>水果选择盘</title>
<style type="text/css">
#disk {
width:340px;
padding:10px;
resize:both;
overflow:auto;
border:1px solid #f90;
line-height:22px;
}
#disk a {
display:block;
float:left;
width:60px;
text-align:center;
text-decoration:none;
font-size:12px;
line-height:20px;
margin:3px;
border:1px solid #ccc;
background-color:#e4e4e4;
counter-increment:mycounter;
}
#disk a:focus {
outline:2px solid #fc6;
outline-offset:2px;
}
#disk a:hover {
-webkit-appearance:button;
-moz-appearance:button;
appearance:button;
}
#disk a:before {
content:counter(mycounter)".";
}
</style>
</head>
<body>
<div id="disk"> <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> <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> <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> <a href="#">蔷薇果</a> </div>
</body>
</html>
Processed:
0.015, SQL:
9
