css没有提供一个直接设置行间距的方式,所以只能通过设置行高来间接的设置行间距,行高越大行间距就越大,用 line-height 来设置行高。

.p1 {
/* 设置行高 */
line-height: 40px;
}

行高类似于上学时使用的单线本,单线本是一行一行的线,线与线之间的距离就是行高,网页中的文字实际上是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示。

行间距 = 行高 - 字体大小

line-height 可以设置的值的类型:

  1. 直接接收一个大小,如:line-height: 20px;
  2. 可以指定一个百分数,如:line-height: 100%;
  3. 可以直接指定一个数字,不带单位,如:line-height: 1.5;
/* 行间距 = 40px(行高) - 20px(字体大小) 为 20px */
.p1 {
/* 字体大小 */
font-size: 20px;
/* 行高为 40px */
line-height: 40px;
}
/* 行间距 = (200% * 20px(字体大小))(行高) - 20px(字体大小) 为 20px */
.p1 {
/* 字体大小 */
font-size: 20px;
/* 行高 = 200% * 20px(字体大小) 为 40px */
line-height: 200%;
}
/* 行间距 = (2 * 20px(字体大小))(行高) - 20px(字体大小) 为 20px */
.p1 {
/* 字体大小 */
font-size: 20px;
/* 行高 = 2 * 20px(字体大小) 为 40px */
line-height: 2;
}

对于单行文本,可以将行高设置为和父元素的高度一致,这样可以将单行文本在父元素中垂直居中,注意,一定是单行文本

.box1 {
width: 200px;
height: 200px;
background-color: aquamarine;
/* line-height 等于 height,单行文本就会在父元素内垂直居中 */
line-height: 200px;
}
<div class="box1">
<a href="#">蜀道之难,难于上青天!</a>
</div>

在 font 属性中也可以指定行高,在字体大小的后面添加 "/行高",该值是可选的,如果不指定则会使用默认值。

/* 格式 */
.p1 {
/* 在字体后面加 “/50px”,表示行高 */
font: bold italic normal 30px/50px 微软雅黑, 宋体, Serif;
}
/* 错误的写法 */
.p1 {
/* 在此设置行高,不会起作用,相反font的"/50px"会起作用 */
line-height: 100px;
/* 在字体后面加 “/50px”,表示行高 */
font: bold italic normal 30px/50px 微软雅黑, 宋体, Serif;
}
/* 错误的写法 */
.p1 {
/* 在此设置行高也不会起作用 */
line-height: 100px;
/* 在字体后面未设置行高,会使用默认值而不是用上面设置的行高 */
font: bold italic normal 30px 微软雅黑, 宋体, Serif;
}
/* 正确的写法 */
.p1 {
/* 在字体后面未设置行高 */
font: bold italic normal 30px 微软雅黑, 宋体, Serif;
/* 行高 */
line-height: 100px;
}
/* 正确的写法 */
.p1 {
/* 在字体后面设置行高 "/100px" */
font: bold italic normal 30px/100px 微软雅黑, 宋体, Serif;
}

css行高的用法总结的更多相关文章

  1. CSS行高--line-height

    遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...

  2. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  3. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  4. CSS行高——line-height 垂直居中等问题

    CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...

  5. css - 行高

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

  6. css行高line-height的用法(转)

    本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块 ...

  7. css行高line-height的用法

    一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比 ...

  8. CSS行高line-height的学习

    一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置 ...

  9. CSS行高——line-height

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

随机推荐

  1. rpc - rpc 程序号数据库

    SYNOPSIS /etc/rpc DESCRIPTION rpc 文件列出了rpc 程序的可读名, 可以此代替rpc 程序号. 每行包含如下信息: 运行rpc 程序的服务名 rpc 程序号 别名 各 ...

  2. socket - Linux 套接字

    总览 #include <sys/socket.h> mysocket = socket(int socket_family, int socket_type, int protocol) ...

  3. find命令使用详解

    一.主要内容 ====================================== 1. 用文件名查找文件 2.用文件名查找文件,忽略大小写 3. 使用mindepth和maxdepth限定搜 ...

  4. Opacity函数-transparentize()、 fade-out()函数

    transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反,让颜色更加的透明.这两个函数会让透明值做减法运算,当计算出来的结果 ...

  5. java String练习题

    package java07; /* 题目: 定义一个方法,把数组{1,2,3}按照指定格式拼接成一个字符串,格式参照如下:[word1#word2#word3] 思路: 1.首先准备一个int[]数 ...

  6. NET Core+win10+Jenkins+Gogs+open ssh持续集成

    背景 阿里云测试环境一台,带宽1M跟不上,Jenkins安装一个插件耗时很长,于是想在本地搭建Jenkins服务,将生成的安装文件同步到目标服务器上. 技术点有: win10:本地环境是win10,测 ...

  7. postman自动化接口测试

    背景描述 有一个项目要使用postman进行接口测试,接口所需参数有: appid: 应用标识: sign:请求签名,需要使用HMACSHA1加密算法计算,签名串是:{appid}${url}${st ...

  8. js append()和appendChild()和insertBefore()的区别

    <body> <input type="button" value="删除" id="btn"> <scrip ...

  9. 基于oracle 的PL/SQL编程 -变量使用

    1. 需要开启的服务:  本机安装的oracle ,默认是开机启动服务的,开机时间太慢,关闭了,需要手动打开: OracleDBConsoleorcl OracleOraDb10g_home1iSQL ...

  10. SQL Server索引管理之六大铁律

    索引是以表列为基础的数据库对象.索引中保存着表中排序的索引列,并且纪录了索引列在数据库表中的物理存储位置,实现了表中数据的逻辑排序.通过索引,可以加快数据的查询速度和减少系统的响应时间;可以使表和表之 ...