line-height详解

　　要说line-height就必须要知道这几个概念了： 顶线、中线、基线、底线。 这也就是在vertical-align中可能用到的top,middle,baseline和bottom属性了。那么究竟是什么呢？

　　撒玛利亚人 写的非常好，大家可以学习。

　　

　　这里，由上到下即为 顶线， 中线，基线和底线，其中基线是第三个。

　　而什么是所谓的行高line-height呢？

　　定义是行高为两行中基线的距离，其实我们也可以理解为任意两个相对的线的距离。   而第一行中的基线和下面一行中的顶线就是行距。那么显然半行距就是中间灰色区域的一半了。

　　font-size 即为字体的高度，即字体所占的真正的高度，即深灰色的部分。

　　什么使内容区呢？

　　内容区就是图中深灰色的部分，即底线和顶线所包裹的区域。

　　

　　什么是行内框呢？

　　每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）

　　

　　行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

　　

　　好了，那什么是line-height呢？

　　定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

　　值得注意的是：一个行内元素如span不是被其中的文字撑开的，而是由其中的line-height撑开的，看下面的这个例子：

<!DOCTYPE html>

<html>

<head>

    <title>for test</title>

    <style>

        .test1{font-size:20px; line-height:; border:1px solid #cccccc; background:blue;}

        .test2{font-size:; line-height:20px; border:1px solid #cccccc; background:red;}

    </style>

</head>

<body>

        <div class="test1">test1内容，背景为蓝</div>

        <div class="test2">test2内容，背景为红</div>

</body>

</html>

　　效果如下所示：

　　可以看到，test1虽然设置了字体大小，但是却没有吧Line-height的span撑起来。

　　而虽然test的font-size为0，但是因为设定了行高，所以被撑起来了。

　　line-height可能的值如下所示；

　　

　　即默认为normal我们一般都不设定。

　　而line-height也可以设置为数字，他表示是与字体尺寸相乘来设置行间距。length即设置固定的行间距。

　　

　　应用；

　　１.对于ｐ等，设置height和line-height相等，这样文字就居中了 。

　　2.对于div中的img，可以给div设置height和line-height相等，然后给img设置vertical-align:middle;即可实现。

　　张鑫旭文章。

　　

　　

line-height详解的更多相关文章

  1. JavaScript中的*top、*left、*width、*Height详解

    来源:http://www.ido321.com/911.html html代码 1: <body> 2: <div class="father" id=&quo ...

  2. opencv学习笔记——cv::line函数详解

    void cvLine( CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8, ...

  3. kernel command line 参数详解

    Linux内核在启动的时候,能接收某些命令行选项或启动时参数.当内核不能识别某些硬件进而不能设置硬件参数或者为了避免内核更改某些参数的值,可以通过这种方式手动将这些参数传递给内核.  如果不使用启动管 ...

  4. CSS中详解height属性

    目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...

  5. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  6. 安装Phoenix时./sqlline.py执行报错File "./sqlline.py", line 27, in <module> import argparse ImportError: No module named argparse解决办法（图文详解）

    不多说,直接上干货! 前期博客 Apache版Phoenix的安装(图文详解) 问题现象 Traceback (most recent call last): File , in <module ...

  7. 安装cloudermanager时出现org.spingframework.web.bind.***** host[] is not present at AnnotationMethodHandlerAdapter.java line 738 ****错误（图文详解）（博主推荐）

    不多说,直接上干货! 首先,这个问题,写给需要帮助的朋友们,本人在此,搜索资料近半天,才得以解决.看过国内和国外,资料甚少.特此,写此博客,为了弥补此错误解决的资料少的缘故! 问题详解  解决办法   ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. HTML标签----图文详解

    国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p>     <br>     <hr>     <center>     ...

  10. 详解shape标签

    转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...

随机推荐

  1. PreparedStatementSQLException

    目录 文章背景 目录 问题分析 问题解决 说明 参考文章 版本记录 layout: default title: PreparedStatementSQLException category: [Te ...

  2. servlet及xml文件处理流程

    启动项目----会找到web.xml文件---跳转到默认jsp----页面重定向----转到xml.文件下 通过<servlet-mapping>映射找到<servlet>标签 ...

  3. APUE（4）---文件和目录 (3)

    十三.函数rename和renameat #include <stdio.h> int rename(const char *oldname, const char *newname); ...

  4. CodeForces 327E Axis Walking(状压DP+卡常技巧)

    Iahub wants to meet his girlfriend Iahubina. They both live in Ox axis (the horizontal axis). Iahub ...

  5. hdu2579之BFS

    Dating with girls(2) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  6. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  7. C# winfrom 存取图片到数据库（二进制，image）

    1.读取本地图片到PictureBox public void InageShow(PictureBox PB) { OpenFileDialog openfile = new OpenFileDia ...

  8. CLR via C# 读书笔记-27.计算限制的异步操作（上篇）

    前言 学习这件事情是一个习惯,不能停...另外这篇已经看过两个月过去,但觉得有些事情不总结跟没做没啥区别,遂记下此文 1.CLR线程池基础 2.ThreadPool的简单使用练习 3.执行上下文 4. ...

  9. Spring Boot 多数据源自动切换

    在Spring Boot中使用单数据源的配置很简单,我们简单回忆下:只需要在application.properties进行基本的连接配置,在pom.xml引入基本的依赖即可. 那么多数据源的原理呢? ...

  10. [ActionScript 3.0] AS利用ByteArray向PHP发送二进制数据生成图片

    flash as3向php发送二进制数据,通过php保存成图片. AS端: package { import com.JPEGEncoder.JPGEncoder; import flash.disp ...