星空网 > 软件开发 > 网页设计

line

1、line-height定义

line-height表示行高,即两行文字基线间的距离。

以下是图示说明:

line

行高是2条红线之间的距离,即:1+2+3+4

在实际测量中,基线不好找,可测量顶线到顶线的距离来代替行高。

2、行间距

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。

示例代码:

<!DOCTYPE html><html lang="zh"> <head>  <meta charset="UTF-8" />  <title>line-height行高测量</title>  <style type="text/css">   * {    padding: 0;    margin: 0;    font-size: 14px;   }      .p {    width: 200px;    margin: 100px;    line-height: 100px;    border: 1px solid green;   }  </style> </head> <body>  <div class="p">   中文abc12345  </div> </body></html>

效果:

line

3、line-height取值

 /*浏览器默认*/    line-height: normal;    /*设置数字,此数字会与当前的字体尺寸相乘来设置行间距*/    line-height:100px;    /*设置固定的行间距*/    line-height: 1.8;    /*基于当前字体尺寸的百分比行间距。*/    line-height: 180%;

说明:line-height可以继承,但是后代元素会继承这个缩放因子而不是计算值。

4、图片不受line-height影响

本示例图片尺寸为150*150px。

示例代码:

<!DOCTYPE html><html lang="zh"> <head>  <meta charset="UTF-8" />  <title>line-height行高属性</title>  <style type="text/css">   * {    padding: 0;    margin: 0;    font-size: 14px;   }      .p {    margin: 100px;    border: 1px solid red;    line-height: 1.8;   }  </style> </head> <body>  <div class="p">   <img src='/images/loading.gif' data-original="dist/img/1_jslang.jpg"  /><span>az123</span>  </div> </body></html>

效果:

line

 

说明:上图的图片和文字下有一个间距,因为img的对齐方式默认为为基线对齐

将img的基线对齐改为底部对齐可去除下面的空白

img{    vertical-align: bottom;   }

效果:

line

 

此时line-height应该设置为图片的高度,即150px。

文字和图片垂直居中的示例代码为:

<!DOCTYPE html><html lang="zh"> <head>  <meta charset="UTF-8" />  <title>line-height行高属性</title>  <style type="text/css">   * {    padding: 0;    margin: 0;    font-size: 14px;   }      .p {    margin: 100px;    border: 1px solid red;    /*设置为图片的高度了*/    line-height: 150px;   }      img {    /*图片对齐方式改为底部对齐*/    vertical-align: bottom;   }  </style> </head> <body>  <div class="p">   <img src='/images/loading.gif' data-original="dist/img/1_jslang.jpg"  /><span>az123</span>  </div> </body></html>

效果:line

 

原标题:line

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流