博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端学习 -- Css -- 行间距
阅读量:6922 次
发布时间:2019-06-27

本文共 720 字,大约阅读时间需要 2 分钟。

在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大。

使用line-height来设置行高 。
行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示。
行间距 = 行高 - 字体大小。

通过设置line-height可以间接的设置行高,可以接收的值:

1.直接就收一个大小;
2.可以指定一个百分数,则会相对于字体去计算行高;
3.可以直接传一个数值,则行高会设置字体大小相应的倍数。

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

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

示例demo:

            

人生若只如初见,何事秋风悲画扇。 等闲变却故人心,却道故人心易变。(一作:却道故心人易变) 骊山语罢清宵半,泪雨霖铃终不怨。(一作:泪雨零 / 夜雨霖) 何如薄幸锦衣郎,比翼连枝当日愿。

人生若只如初见,何事秋风悲画扇。 等闲变却故人心,却道故人心易变。(一作:却道故心人易变) 骊山语罢清宵半,泪雨霖铃终不怨。(一作:泪雨零 / 夜雨霖) 何如薄幸锦衣郎,比翼连枝当日愿。

结果:

 

转载地址:http://kxhcl.baihongyu.com/

你可能感兴趣的文章
Linux恶意软件将树莓派设备变成“矿工”
查看>>
拥抱开放式网络 通往下一代数据中心
查看>>
为了防止客户的丢失,请客服人员禁止做的四件事
查看>>
39人被骗147万 大麦网遭撞库带来的警醒
查看>>
SDN重塑企业网络 网络管理者的角色转变
查看>>
NGINX发布新版本,旨在解决应用程序安全性
查看>>
在SSH中增加JUNIT4单元测试
查看>>
阿里巴巴物联网战略软硬通吃 不做产品做生态
查看>>
柳传志:市场不理解联想控股 不会减持联想集团
查看>>
从雷军提案看涂鸦硬件智能化升级方案v2.0
查看>>
移动化办公:Saas的3种困境和新的模式
查看>>
Test Case所涵盖的范围足够了吗?
查看>>
Debian 移植到 OpenRISC 架构
查看>>
《大数据架构和算法实现之路:电商系统的技术实战》——1.4 分类效果评估...
查看>>
CoreOS 继续推进 Docker 容器替代 Rockets
查看>>
线程同步工具(五)运行阶段性并发任务
查看>>
《Adobe Dreamweaver CS6中文版经典教程》——2.5 HTML5简介
查看>>
《精通软件性能测试与LoadRunner最佳实战》—第2章2.节
查看>>
Java IO: 其他字符流(下)
查看>>
独家专访 | 微软郑宇:这个时代不缺数据,缺得是不够开放的思维
查看>>