浏览器默认行高1.0-1.2之间
line_height.jpg
行高主要有五种设置方法
1.line-height: normal; //默认
2.line-height: inherit; //继承
3.line-height: 140%; //百分比
4.line-height: 20px/20em //具体值
5.line-height: 1.2 //直接数值
font中设置line-height
1.line-height:
p{ font: 100%/normal arial; //字体大小/行高 字体
2.line-height:
p{ font: 100%/120% arial; //字体大小/行高 字体
3.line-height:
p{ font: 100%/20px arial; //字体大小/行高 字体
4.line-height:
p{ font: 100%/1.2 arial; //字体大小/行高 字体
实例
line-height
html结构
<body>
<h1> Hello World h1</h1>
<p> P Hello World Hello WorldHello WorldHello WorldHello WorldHello W orldHello WorldHello WorldHello WorldHello WorldHello WorldHello World dHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World p</p>
<div id="footer">
footer Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
</div>
</body>
Example1 The percentage value
CSS
body{
font-size: 16px;
line-height: 120%;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最终line-height可在浏览器computed中查看
| 元素 | font-size | 最终line-height | 显示效果 |
|---|---|---|---|
| body | 16px | 16 * 120% = 19.2px | |
| h1 | 32px | inherits = 19.2px | 太挤 |
| p | 16px | inherits = 19.2px | ok |
| #footer | 12px | inherits = 19.2px | 太宽 |
Example2 the length value
CSS
body{
font-size: 16px;
line-height: 20px;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最终line-height可在浏览器computed中查看
| 元素 | font-size | 最终line-height | 显示效果 |
|---|---|---|---|
| body | 16px | 20px | |
| h1 | 32px | inherits = 20px | 太挤 |
| p | 16px | inherits = 20px | ok |
| #footer | 12px | inherits = 20px | 太宽 |
Example 3 the normal value
CSS
body{
font-size: 16px;
line-height: normal;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最终line-height可在浏览器computed中查看
| 元素 | font-size | 最终line-height | 显示效果 |
|---|---|---|---|
| body | 16px | normal * 1.2 => 16 * 1.2 = 19.2px | |
| h1 | 32px | normal * 1.2 => 32 * 1.2 = 38.4px | ok |
| p | 16px | normal * 1.2 => 16 * 1.2 = 19.2px | ok |
| #footer | 12px | normal * 1.2 => 12 * 1.2 = 14.4 | ok |
Example 4 the number value
CSS
body{
font-size: 16px;
line-height: 1.5;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最终line-height可在浏览器computed中查看
| 元素 | font-size | 最终line-height | 显示效果 |
|---|---|---|---|
| body | 16px | 16 * 1.5 = 24px | |
| h1 | 32px | 32px * 1.5 = 48px | 太松 |
| p | 16px | 16px * 1.5 == 24px | ok |
| #footer | 12px | 12px * 1.5 = 18px | ok |
根据上方例子来看适应最好的方式是用下方进行line-height自适应设置。
body{
line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 { line-height: 1.2; }
