您的位置：首页 > Web前端 > CSS

css基础之line-height

2015-01-14 22:06 225 查看

什么是line-height（行高）？line-height设置1.5和150%有什么区别？这是一个比较常见的css面试题，带着这个问题往下看。所谓行高是指一段文字中某一行的高度吗？具体来说不是。w3school是这样定义的：

line-height 属性设置行间的距离（行高），该属性会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

何为基线？基线不是汉字的底端，从英文字母来看，字母a、b、c的底端就是基线所在位置，文字默认垂直对齐方式就是基线与基线对齐（baseline），下面图中的蓝色线就是基线。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>line-height</title>

<style type="text/css">
.c1{font-size: 14px; line-height: 1.5; width: 200px;}
.c2{font-size: 28px;}

.c3{font-size: 14px; line-height: 150%; width: 200px;}
.c4{font-size: 28px;}
</style>
</head>
<body>

<div class="c1">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
<p class="c2">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>
</div>
<div class="c3">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
<p class="c4">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>
</div>

</body>
</html>

View Code
因此，为了避免这种情况发生，建议将行高设置缩放因子，避免使用百分比或具体值。

本文地址http://www.cnblogs.com/wangmeijian/p/4222908.html by 王美建

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航