默认状态,浏览器使用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;}

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

什么是行间距?

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

行间距,即传说中控制两行文字之间垂直距离的东东。

在CSS,line-height被用来控制行与行之间的垂直距离。

不过行间距与半行间距还是取决于CSS中的line-height。

那么如何来使用line-height?

默认状态,浏览器使用1.0-1.2 line-height .这是一个初始值。

你可以定义CSS里的line-height属性来覆盖默认值

Css代码

  1. p { line-height:140%; }

你可以用5种方式来定义line-height:

1、line-height可以被定义为normal。

Css代码

  1. body { line-height:normal; }

2、line-height可以被定义为继承

p { line-height:inherit; }

3、line-height可以使用一个百分比的值

p { line-height:120%; }

4、line-height可以被定义为一个长度值(单位px、em等)

p { line-height:20px; }

5、line-height也可以被定义为纯数字(甚至没有单位)

p { line-height:1.2; }

缩写line-height

那5种line-height值也可以在font属性里缩写

line-height值紧跟着font-size值,使用斜杠隔开<font-size>/<line-height>

举例来说......

值normal

body { font:100%/normal arial; helvetica, sans-serif; }

值百分比

body { font:100%/120% arial; helvetica, sans-serif; }

值长度

body { font:100%/20px arial; helvetica, sans-serif; }

值纯数字

body { font:100%/1.2arial; helvetica, sans-serif; }

计算line-height

有些CSS属性是可继承(inherited)(从层叠的元素里传递下来)

这样设计是为了方便开发者,他们不用为所有后代元素再设置一次

例如:color属性是可继承的。如果body被定义了color,那么它会传递给页面里的所有元素

对于line-height继承会有一点复杂

为了更好的演示line-height的各种用法

使用如下的HTML代码

<h1> consect etuer adipi scing .... </h1>

<p> Lorem ipsum dolor sit amet .... </p>

<div id="footer"> Duis autem vel eum .... </div>

这些代码有着如下文档树结构

我们同时使用如下CSS

(注:文字大小使用像素是为了看起来简单,尽管不推荐这么干!)

Css代码

  1. body { font-size:16px; line-height:XXX; }
  2. h1 {font-size:32px;}
  3. p {font-size:16px;} #footer {font-size:12px;}

例1:值百分比

line-height被设置为百分比(120%)

Css代码

  1. body { font-size:16px; line-height:120%; }
  2. h1 {font-size:32px;}
  3. p {font-size:16px;}
  4. #footer {font-size:12px;}

line-height的百分比(120%)和body的文字大小(16px)被用来计算值(16px*120%=19.2px)

这个计算出来的值会被层叠下去的元素所继承

所有继承下来的元素会忽略本身的font-size,而使用相同的,计算出来的line-height.

line-height不会随着相关的font-size做相应的比例缩放

例2、值:长度

line-height被设置成一个长度值(20px)

Css代码

  1. body { font-size:16px; line-height:20px; }
  2. h1 {font-size:32px;}
  3. p {font-size:16px;}
  4. #footer {font-size:12px;}

长度值20px会被后代继承

所有继承下来的元素会忽略本身的font-size,而使用相同的,继承的line-height

line-height还是不会随着相关的font-size做相应的比例缩放

例3、值:normal

line-height被设置为normal(约为1.2)

Css代码

  1. body { font-size:16px; line-height:normal; }
  2. h1 {font-size:32px;}
  3. p {font-size:16px;}
  4. #footer {font-size:12px;}

在本例中使用继承的计算出来的值还不如用值normal,浏览器在解释normal的时候会有细微差别。

现在所有继承下来的元素不会忽略本身的font-size,而使用基于font-size算出来的line-height

现在,line-height会随着相关的font-size做相应的比例放缩

但是,如果你既想要normal的灵活,又想要设置一个自定义的值这时候就得指望值:纯数字
 例4、值:纯数字

line-height被设置为值:纯数字(1.5)

Css代码

  1. body { font-size:16px; line-height:1.5; }
  2. h1 {font-size:32px;}
  3. p {font-size:16px;}
  4. #footer {font-size:12px;}

在本例中用继承的计算后的值,倒不如用系数(1.5)

现在所有继承下来的元素使用基于font-size算出来的line-height

再一次,line-height会随着相关的font-size做相应的比例缩放

那么哪一种是最好的方案?

一般来说,设置行高为值:纯数字是最理想的方式。因为其会随着对应的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

为了深入了解line-height,我们需要先来了解 CSS boxes的各种类型

我们从一段简单的HTML代码开始

<p> The
<em>emphasis</em> element is defined as "inline".
</p>

这些代码在大多数浏览器下应该会被渲染成下图

这个例子中涉及到4个boxes

box类型1:containing boxes

这个例子中段落就是一种containing boxes,它包含了其他boxes。

box类型2:inline boxes

在段落内有一系列的inline boxes

inline boxes 不会让内容显示成块形式,而是排成一行。

emphasis 元素就是一种inline boxes

其他没有特别标签的box被称为拟名inline boxes

box类型3:line boxes

inline boxes在containing boxes里一个接一个组成了line boxes

box类型4:content area

content area是围绕着文字的看不见的一种box,他的高取决于font-size

inline boxes与inline-height

行高基于一则简单小配方,应用在inline boxes上。

1.line-height和font-size的差别可以从下面的例子中看出

例:

font-size:16px;

line-height:20px;

差别:4px(即行间距)

2.拆分行间距,来创建一个半行间距

4px行间距/2 = 2px半行间距

3.半行间距会被应用在content area 的顶部和底部

但有的时候情况会有一点点的复杂

content box包裹着line box,而半行间距位于content box 的上部和下部。

然而有时候inline box 会小于content area!

举例来说,如果line-height 小于 font-size,inline box 会优先于行高

例:

font-size:16px;

line-height:12px;

inline box 高度:12px

content area 会溢出,inline box的顶部和底部半行高会折叠起来以保证inline box的高度

line box的一些注解

line box的高度取决于它内部最高的inline box (或被替换的元素)

最高的inline box 可以是匿名inline box

也是可以增加line-height后的inline box

还可以是更大font-size的inline box

或存在上标或下标

或,甚至存在可替换元素,例如一张图

line box在containing box宽度内靠着彼此的颈部堆积

最后,总结

上标和下标

上标和下标有时候会强制影响line box 使其高度异常。

你可以把line-height设置为0来解决这个问题,那样会移除元素的上下半行间距

sup,sub
{ine-height:0;}

IE6,line-height和内联图片

IE5/6错误的移除了内联图片的顶部半行间距

搞定这玩意儿,需要点技术含量。如果有必要的话,给图片设置顶部的margin值,以模拟顶部半行间距。这个顶部的margin应该只针对于IE5/6(使用条件注释)

深入了解line-height(各种单位总结1.5/150%/1.5em)的更多相关文章

  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 高度(css height)

    DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度.使用CSS属性单词height.单位可以使用PX,em等常用使用PX(像素)为ht ...

  5. css中单位的使用

    css中许多的属性都需要添加长度,而长度一般由数字和单位构成,如1px,1.5em,2vh:也可以省略单位,如line-height:1.5,表示行高为字体大小的1.5倍: 长度单位一般也分为相对长度 ...

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

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

  7. 吉特仓库管理系统- 斑马打印机 ZPL语言的腐朽和神奇

    上一篇文章说到了.NET中的打印机,在PrintDocument类也暴露一些本质上上的问题,前面也提到过了,虽然使用PrintDcoument打印很方便.对应条码打印机比如斑马等切刀指令,不依赖打印机 ...

  8. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

  9. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

随机推荐

  1. vue动态组件 互相之间传输数据 和指令的定义

    地址:https://blog.csdn.net/zhanghuanhuan1/article/details/77882595 地址:https://www.cnblogs.com/xiaohuoc ...

  2. 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载

    jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  3. a标签的锚点链接

    <a href="#creditor" class="clearfix nav_creditor"> <div class="sec ...

  4. 《零基础学习Python制作ArcGIS自定义工具》课程简介

    Python for ArcGIS Python for ArcGIS是借助Python语言实现ArcGIS自动化行为的综合,它不止是如课程标题所述的“制作ArcGIS自定义工具”,还包括使用Pyth ...

  5. Python之数字的格式化输出

    需求: 将数字格式化后输出,并控制数字的位数.对齐.千位分隔符和其他的细节 x = 1234.56789 # Two decimal places of accuracy print(format(x ...

  6. 【问题解决方案】本地仓库删除远程库后添加到已有github仓库时仓库地址找不到的问题(github仓库SSH地址)

    参考: 我参考我自己.jpg 背景: 想添加一下远程库,github主页找了半天,Google搜索了半天,都没有找到,所以这里写一个,记录一下 1-格式分析:git@github.com:用户名/仓库 ...

  7. elasticsearch 英文数字组合字符串模糊检索

    不分词,然后用wildcard查询 { "query": { "wildcard": { "字段名": "*123*" ...

  8. Dagger2 探索记3——两大进阶组件(一)

    今天要讲的时@Scope这个组件.为什么说它是进阶组件,就是因为它基本上没作用,但在理解了基本组件之后又必须用到. Scope的意思是作用域,一般用来标记@Provide方法,将生成的对象单例化.但@ ...

  9. js实现图片延迟加载原理

    <img src="image/1188695.png" alt="taobao" trueImg="image/1.jpg" id= ...

  10. 转载:java集合类数据结构分析

    数组是 最常用的数据结构.数组的特点是长度固定,可以用下标索引,并且所有的元素的类型都是一致的.数组常用的场景有把:从数据库里读取雇员的信息存储为 EmployeeDetail[],把一个字符串转换并 ...