什么是行间距?

古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。

行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距离。

不过,行间距与半行间距,还是取决于CSS中的line-height。那么,如何来使用line-height呢?

默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值:p{line-height:140%}

你可以有5种方式来定义line-height。

1.line-height可以被定义为:body{line-height:normal;}

2.line-height可以被定义为:body{line-height:inherit;}

3.line-height可以使用一个百分比的值body{line-height:120%;}

4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}

5.line-height也可以被定义为纯数字, body{line-height:1.2}

缩写line-height

那5种line-height写法,可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开,如:<font-size>/<line-height>

实例:body{font:100%/normal  arial;} , body{font:100%/120%  arial;} ,body{font:100%/1.2  arial;}  ,body{font:100%/25px  arial;}

计算line-height

有些CSS属性是可继承的(inherited),从层叠的元素里传递下来。这样做是为了方便开发者,不再为后代元素重新设值。

对于line-height继承有点复杂。

1、百分比

2.长度

3 值:normal

4 纯数字

(但实战应用在中文字体或中英文字体混合,以及IE678,XP win7里,行高规则又有所不同,泪流满面)

沁园春 www.qinychun.com

深入了解css的行高Line Height属性的更多相关文章

  1. 项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  2. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  3. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  4. cssline-height行高 全解

    1.  基线.底线.顶线 2.  行距.行高 3.  内容区 4.  行内框 5.  行框 元素对行高的影响 扩展阅读 1.  基线.底线.顶线 行高指的是文本行的基线间的距离. 基线并不是汉字的下端 ...

  5. 关于网页中行内元素的基线(baseline)、行高(line-height)、垂直对齐(vertical-align)等

    CSS基线之道 http://www.qianduan.net/css-baseline-road.html 垂直对齐:vertical-align属性 http://www.ddcat.net/bl ...

  6. easyui datagird 解决行高不一致问题!

    <style>.datagrid-btable .datagrid-cell {padding: 6px 4px;overflow: hidden;text-overflow: ellip ...

  7. css中line-height行高的深入学习

    之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...

  8. CSS行高——line-height

    初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知 ...

  9. CSS行高line-height的理解

    一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...

随机推荐

  1. tomcat 设置集群

    本文介绍的是使用tomcat内置的集群功能.跟官方文档的区别是没有使用广播,而是使用了static membership的方式. 需要修改server.xml 放在哪个元素下来的,是Host还是啥记不 ...

  2. js购物车计算价格

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  3. 关于 Android 5.0 原生系统网络图标上的感叹号问题解决方法

    解决方案 adb shell settings put global captive_portal_server g.cn 参考 关于 android 5.0 网络图标上的感叹号及其解决办法

  4. 使用复合索引代替单键索引,来避免单键有null值的情况

    查看原表: SQL> select count(*) from t1; COUNT(*) ---------- 3229088 SQL> select count(*) from t1 w ...

  5. js web实现移动端触控

    // 触摸事件 $(".m_l_i_l a").on("touchstart", function(){ $(this).css("color&quo ...

  6. 使用JavaService.exe(amd64)发布java服务(jdk x64)

    最近项目中需要使用java服务,但是java服务已经写好了,就等待部署到windows服务中,遇到了种种困难------在x64服务器中部署jdk x64编译的jar时,遇到了各种纠结. 本文找到了一 ...

  7. JAVA线程池原理详解二

    Executor框架的两级调度模型 在HotSpot VM的模型中,JAVA线程被一对一映射为本地操作系统线程.JAVA线程启动时会创建一个本地操作系统线程,当JAVA线程终止时,对应的操作系统线程也 ...

  8. <<卸甲笔记>>-Oracle线下迁移到PPAS

    迁移原则 1.尽量保持Oracle与PPAS一致,这会使得日后应用程序迁移更为简单 2.迁移前检查PPAS中是否有同名帐号及同名的Schema a)如果有,建议考虑删除或改名 b)如果没有,先手工建立 ...

  9. C#窗体 流

    流:(I/O)输入输出流 分类:文件流,内存流,网络流 流的操作一般要放在try catch里面,操作文件网络容易出现异常 命名空间:using system .IO;using system .Te ...

  10. WIN8系统安装软件时提示"扩展属性不一致"的解决方法

    单位新添加了两台T440P笔记本电脑,需要安装五笔输入法,同事一直安装不上.开始以为是WIN8系统跟输入法不兼容的问题,怀疑是输入法下载有误.于是直接在输入法官网下载了输入法,问题依旧:扩展属性不一致 ...