line-height不允许负值，给定值之后会根据font-size计算行高，line-height指定的行高是行高最小值，设置height可以增大行高

line-height的计算：以px为例，line-height减font-size再除以二，即为font的上下间距

normal的情况为默认值，浏览器会计算出“合适”的行高，与设置的字体有关。多数浏览器（Georgia字体下）取值为1.14，即为font-size的1.14倍，如果未设定font-size，那既是基准值16px的1.14倍
单独讨论这个取值是没什么意义的，因为normal和具体的数值相比，会因为字体的不同而不同
如果是项目需要，还是给定一个值好一些

下例代码中，如果不设置line-height:1的话，则normal/默认的行高显示为22*1.14px=25px;

  1. <html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <head>
  4.     <style type="text/css">
  5.         p{
  6.             margin:0;font-size:22px;
  7.         }
  8.         p.small{
  9.             line-height: 0.5
  10.         }
  11.         p.big{
  12.             line-height: 2
  13.         }
  14.         /*p.normal{
  15.             line-height: 1
  16.         }*/
  17.     </style>
  18. </head>
  19. <body>
  20.     <p class="normal">
  21.         这是拥有标准行高的段落。
  22.         默认行高大约是 1。
  23.         这是拥有标准行高的段落。
  24.     </p>
  25.  
  26.     <p class="small">
  27.         这个段落拥有更小的行高。
  28.         这个段落拥有更小的行高。
  29.         这个段落拥有更小的行高。
  30.     </p>
  31.  
  32.     <p class="big">
  33.         这个段落拥有更大的行高。
  34.         这个段落拥有更大的行高。
  35.     </p>
  36. </body>
  37. </html>

那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;}

----------------------------------------------------------------------------

如果设为normal或者不设的话，即为默认的方式：根据自身的font-size*1.12

关于继承，可以发现，12*120%=14.4px，这个计算出来的值会被层叠下去的元素所继承，

行内元素如span没有行高（line-height）

  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         body{font-size:12px;line-height:120%;font-family: Georgia;margin:0;}
  5.         span{font-size: 16px;}
  6.         h1{font-size: 32px;margin:0;}
  7.         #footer{font-size: 16px;margin:0;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- body的字体大小12*120%=14x -->
  12.     <span>bbbbbbbbbbbbbbbbbb</span><!-- 16*1.2=19px -->
  13.     <p id="footer">cccccccccccccccccccc</p><!-- body的字体大小12*120%=14x -->
  14. </body>
  15. </html>

而设置120%和1.2效果是不一样的！！

  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         body{font-size:12px;line-height:1.2;font-family: Georgia;margin:0;}
  5.         span{font-size: 16px;}
  6.         h1{font-size: 32px;margin:0;}
  7.         #footer{font-size: 16px;margin:0;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- 32*1.2=38px -->
  12.     <span>bbbbbbbbbbbbbbbbbb</span><!-- 16*1.2=19px -->
  13.     <p id="footer">cccccccccccccccccccc</p><!-- 16*1.2=19px -->
  14. </body>
  15. </html>

而在body中设置了line-height为px值的话，

  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         body{font-size:12px;line-height:22px;font-family: Georgia;margin:0;}
  5.         span{font-size: 16px;}
  6.         h1{font-size: 32px;margin:0;}
  7.         #footer{font-size: 16px;margin:0;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- 22px -->
  12.     <span>bbbbbbbbbbbbbbbbbb</span><!-- 16*normal比例(跟字体有关)=19px -->
  13.     <p id="footer">cccccccccccccccccccc</p><!-- 22px -->
  14. </body>
  15. </html>

一般来说，设置行高为值：纯数字是最理想的方式。因为其会随着对应的font-size而放缩

在多种情况下，很难确定一个完美的line-height，但无论如何，保守估计标题是没有段落那么的需要自适应line-height

举例来说，所有内容被定义为1.5，标题被定义为1.2.

body {line-height:1.5} h1,h2,h3,h4,h5,h6 {line-height:1.2}

万维网内容可存取性指南（WCAG）2.0规定“段落中的行距至少要1.5倍”，这意味着如果要达到AAA等级，行高应为1.5.

关于line-height的更多相关文章

  1. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. 真正的能理解CSS中的line-height，height与line-height

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

  5. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  7. 微信小程序demo2

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现   ...

  8. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  9. 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  10. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

随机推荐

  1. TCP流量控制与拥塞控制

    为了更好地对传输层进行拥塞控制,因特网建议标准定义了以下四种算法:慢启动.拥塞避免.快重传和快恢复. 1 接收窗口rwnd与拥塞窗口cwnd 发送方在确定发送报文段的速率时,既要根据接收方的接收能力, ...

  2. Linux 客户端访问 NFS报Permission Denied错误

    在Linux服务器上访问NFS共享目录时,报错:Permission denied. 如下截图所示: 因为这个NFS是系统管理员配置的,我又不了解具体情况,而系统管理员休假中,联系不上.那么我只能先多 ...

  3. Linux监控工具介绍系列——free

    在Linux系统中,我们查看.监控系统内存使用情况,一般最常用的命令就是free.free命令其实非常简单,参数也非常简单,但是里面很多知识点未必你都掌握了.下面总结一下我所了解的free命令.如有不 ...

  4. C++STL - 类模板

    类的成员变量,成员函数,成员类型,以及基类中如果包含参数化的类型,那么该类就是一个类模板   1.定义 template<typename 类型形参1, typename 类型形参2,...&g ...

  5. 在MySQL中，如何计算一组数据的中位数？

    要得到一组数据的中位数(例如某个地区或某家公司的收入中位数),我们首先要将这一任务细分为3个小任务: 将数据排序,并给每一行数据给出其在所有数据中的排名. 找出中位数的排名数字. 找出中间排名对应的值 ...

  6. 实战搭建SVN代码版本服务器

    前言:公司要求搭建一台SVN代码版本管理服务器,用于管理所有代码资产: 项目架构图 1.环境安装 [root@host_centos ~]#yum –y install subversion mod_ ...

  7. java请求https地址如何绕过证书验证?

    原文http://www.blogjava.net/hector/archive/2012/10/23/390073.html 第一种方法,适用于httpclient4.X 里边有get和post两种 ...

  8. debian/ubuntu安装桌面环境

    apt-get install xorg apt-get install gnome 然后startx ubuntu 安装Gnome桌面 1.安装全部桌面环境,其实Ubuntu系列桌面实际上有几种桌面 ...

  9. Dan Zhang - Visual Studio ALM MVP

    I am a Microsoft Certified Partner specialising in .NET solutions, also worked as an ALM consultant. ...

  10. java 单例

    Java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍两种:懒汉式单例.饿汉式单例. 饿汉式和懒汉式区别 从名字上来说,饿汉和懒汉, 饿汉就是类一旦加载,就把单例初始化完成,保证 ...