前端学习笔记63-行高

阅读量：335 次

发布时间：2019-03-04

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

前端学习笔记63-行高

终于是学完图标字体了，昨天有事没有学，今天继续。（昨天发的博文是前天写的）

行高

行高是文字占有的高度。

如何看见呢？

看代码，

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

方框里文字的上下都有一定的间隙，那个也是行高的一部分。

line-height

可以用line-height来设置行高。

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

这里line-height还可以直接用数字来设置，整数表示字体高度的倍数。

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

字体框

字体框是字体存在的格子，设置font-size实际上就是在设置字体框的高度。

font-size设置的是框的大小，字体的高度不会超过这个大小，这可以从前面两张图看出来，放大看，会发现字并没有贴着框的边。

平均分配

行高会在字体框的上下平均分配

话不多说，看代码，文字垂直居中。

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

注意行高是一行的行高，不是总行高。

行间距

行高经常用来设置文字的行间距。

行间距=行高-字体大小

直接看代码

    
       
       
       Document        
   
    今天天气真热
   
    
   
    今天天气真热

在这里插入图片描述

转载地址：http://ppeh.baihongyu.com/

你可能感兴趣的文章

在create-react-app创建的项目下允许函数绑定运算符

博客园新闻频道开始公开测试

评论表聚集索引引起的评论超时问题

博客园上海俱乐部4月份活动通知邀请函已经发出！

上周热点回顾（5.24-5.30）

Internet Explorer 10 专题上线

云计算之路-阿里云上：0:25~0:40网络存储故障造成网站不能正常访问

网站故障公告1：使用阿里云RDS之后一个让人欲哭无泪的下午

今天的访问高峰，扛过去了

上周热点回顾（12.31-1.6）

上周热点回顾（1.21-1.27）

上周热点回顾（6.3-6.9）

上周热点回顾（8.12-8.18）

【故障公告】升级阿里云 RDS SQL Server 实例故障经过

蹒跚来迟：新版博客后台上线公测

上周热点回顾（9.16-9.22）

上周热点回顾（11.4-11.10）

[网站公告]11月26日00:00-04:00阿里云RDS升级

[网站公告]又拍云API故障造成图片无法上传（已恢复）

上周热点回顾（12.16-12.22）