CSS行间距line-height和字间距、字体间距、字符间距详解

2023年1月2日 82次阅读 来源: Lioner-CSU

行间距line-height

行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。

在文章中，要实现调节设置每行文字字体间距（行距）是使用line-height属性。

要使得每行的文字一定的间距距离所以可以通过line-height样式实现。接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距。

1、对于文章类文字上下排间隔
一般我们对对象设置设置line-height行高属性即可实现让自动换行文字排版均匀间隔多少设置。

2、对单排文字上下垂直居中
假如我们一个固定30px高度div对象，如果要让其文字内容上下垂直居中，我们即可使用line-height:30px即可。

 

具体效果

1、为了观察到行距设置效果，新建两个div盒子对象，分别div命名为“.divcss5-a”和“.divcss5-b”。1、div+css实例完整HTML代码：


    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>divcss5 css行间距实例</title> 
    <style> 
    .divcss5-a{ line-height:22px}/* css 注释说明：设置行距行高22px */ 
    .divcss5-b{ line-height:40px}/* 设置行距行高22px */ 
    </style> 
    </head> 
    <body> 
    <div class="divcss5-a"> 
    我被设置行高22px<br /> 
    我行距为22培训<br /> 
    DIVCSS5占位内容 
    </div> 
    <div class="divcss5-b"> 
    我被设置行高40px<br /> 
    我行距为40培训<br /> 
    DIVCSS5占位内容 
    </div> 
    </body> 
    </html>

设置了两个盒子分别css行高间隔设置为22px和40px，大家可以复制以上代码进行实践观察效果掌握css设置对象内字体文字上下行间距。掌握设置行间距行高代码是什么。

 

2、css div行高行间距效果截图

《CSS行间距line-height和字间距、字体间距、字符间距详解》
字体上下行间距css+div实例截图

3、总结
要实现上下换行文字行间距行高样式其实我们只用对文字所在对象设置line-height样式即可，一般行距值设置大于14px以上即可，根据css字体大小，css行高值不能小于字体值，不然行距设置值比字体大小值小后字体会重叠一部分，形成不兼容效果。

 

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r646.shtml

 

css 字间距、CSS字体间距、css 字符间距设置案例分析

接下来我们来介绍下css 字间距，使用css来控制字与字之间距离，也叫css字间距方法。

使用到的css样式属性单词text-indent抬头距离，letter-spacing字与字间距。

Css字间距、div css字符间距样式实例

1、text-indent设置抬头距离css缩进
《CSS行间距line-height和字间距、字体间距、字符间距详解》
即对，对应div设置css样式text-indent : 20px; 缩进了20px

2、letter-spacing来设置字与字间距_字符间距离，字体间距css样式
即对对应div设置css属性样式为letter-spacing:8px;，字间距为8px

以上即是介绍了使用css来设置字间距、字符间距、字体间距、段落开头缩进，分别使用了letter-spacing（间距设置）、text-indent（缩进）两个css属性，以上是div+css网divcss5为你简单通过实例讲解介绍。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r75.shtml

    原文作者：Lioner-CSU
    原文地址: https://blog.csdn.net/qq_35630674/article/details/97235465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞