前端学习笔记63-行高

发布日期：2021-05-07 08:33:53 浏览次数：19 分类：技术文章

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

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

行高

行高是文字占有的高度。

如何看见呢？

看代码，

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

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

line-height

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

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

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

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

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

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

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

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

    
       
       
       Document        
   
    今天天气真热

在这里插入图片描述

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

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

行间距=行高-字体大小

直接看代码

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

在这里插入图片描述

上一篇：前端学习笔记64-字体的简写属性

下一篇：Vue之v-on修饰符之按键修饰符（011）

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！