line-height（行高）

最新推荐文章于 2025-10-01 23:07:43 发布
原创 最新推荐文章于 2025-10-01 23:07:43 发布 · 4.2k 阅读 · 46 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

行高(line-height)是调整文本布局的重要属性，它决定了文字之间的垂直间距。行高可以设置为具体数值或字体大小的倍数，用于控制文本的行间距。当行高与元素高度相等时，能实现单行文字的垂直居中显示。同时，行高也常被用来优化文字的阅读体验，创建合适的行间距有助于提高可读性。字体框则是文字显示的基础，设置font-size实际上设定的是字体框的高度。

line-height（行高）

line-height（行高）介绍

1、行高指的是文字占有的实际高度

2、通过line-height来设置行高

3、行高可以直接指定一个大小（px em）

4、也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数

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

6、可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

7、行高经常还用来设置文字的行间距

                                   行间距 = 行高 + 字体大小
字体框
字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
CSS深入理解之line-height
literarygirl的博客
02-12 1万+
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。 一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。 定义三问： 什么是基线？ 为何是基线？ 需要两行？ 如图红色线即为基线 基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线） 第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
line-height的使用方式
余光的博客
10-12 8255
line-height line-height 这个属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 一、line-height 属性被指定为以下任何一个： /* Keyword value */ line-height: normal; 取决于用户端。桌面...
深入解析 CSS `line-height` 属性
最新发布
2501_93104808的博客
10-01 994
CSS line-height 属性用于控制文本行高，影响行间距和可读性。它定义了行盒高度，通过半行距实现文本垂直居中。属性值包括：normal（默认）、数字（推荐）、长度单位、百分比等。数字值会继承乘数而非固定值，确保子元素保持比例。最佳实践建议使用1.4-1.8的无单位数值优化可读性，大字体可减小行高，小字体需增大。该属性还支持单行文本垂直居中技巧，兼容所有现代浏览器。
height和line-height的区别（简单易懂）
apple_51491580的博客
02-07 2万+
height：指定区域的高度 line-height：一行的高度，简称行高。 行高：两行文字之间基线的距离 1.height和line-height值相同的情况 当height和line-height相等时，区域中的内容居中（即区域的高度和每一行的高度一样，内容居中） 如图所示： 内容居中（蓝色部分是选中的部分，有背景的地方是定义的区域），有背景的地方就是区域高度（height），选中的时候蓝色部分的高度即为行高。 2.对height进一步理解 看下图： 这里height是两倍line-heigh
line-height行高
zhouming1107的博客
03-09 1549
line-height,文字垂直居中
【line-height】 line-height详解
03-27 1万+
本文摘自不同文章，楼主自己汇总集合，对比概念，相对比较全面。 楼楼自己的博客：http://blog.youkuaiyun.com/taotao6039 原文1，http://www.woaicss.com/article/div/line-height.htm 原文2，http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98
tinyMCE富文本编辑器line-height行高插件
10-12
通过以上步骤，你就成功地在TinyMCE中集成了line-height行高插件，为用户提供了一个直观的方式来调整文本的行高，提高了编辑体验。这个插件尤其适用于需要精细排版的场景，如撰写长篇文章或制作专业报告。
关于css中line-height(行高)设置无效的问题的解决方法
09-22
在CSS中，`line-height` 是一个非常重要的属性，用于设置元素内文本行之间的垂直间距。然而，在实际应用中，有时可能会遇到设置`line-height`后效果不明显或者无效的问题。本文将通过一个具体的例子来解析这个问题，...
CSS line-height行高上下居中垂直居中样式属性
12-08
**CSS line-height属性详解：行高与垂直居中** 在网页设计中，`line-height` 是一个非常重要的CSS样式属性，用于控制元素内部文本行之间的垂直间距，它可以帮助实现文字和图片的上下居中，以及单行或多行文本的垂直...
tinyMCE 富文本编辑器 line-height 行高插件
03-10
tinyMCE 富文本编辑器 line-height 行高插件。...tinyMCE富文本编辑器line-height行高插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示 tinyMCE line-height 行高插件
行高line-height
m0_46552208的博客
07-07 262
基本概念 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。
line-height详解
热门推荐
liting_1992的博客
10-21 3万+
基本概念 line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。 图中：上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~ 根据浏览器的解析不同，line-height的表现方式有两种 1.基线之间的距离为line-height 2.lineHeight 为，font-size的上下加上半行距 ** 取值 ** 值
行高 line-height
aizou6838的博客
03-07 181
所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线。 从上到下四条线分别是顶线、中线、基线、底线，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。基线不是最下面的线，最下面的是底线。 行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。 行距是指一行底线到...
[转]CSS行高line-height属性理解及应用
weixin_33714884的博客
11-27 177
行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整行高（line-height）可以减低阅读的困难与枯燥，并且使页面显得美观。行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。 7.3.1语法 line-height属性的具体定义列表如下： 语...
CSS中line-height属性
qq_42526440的博客
01-06 2459
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 CSS Demo: line-height line-height: normal; line-height: 2.5; line-height: 3em; line-height: 150%; line-height: 32px; 语法 /* Keyword valu
你对 line-height 是如何理解的
LuckXinXin的博客
02-27 617
line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中 line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会 .
关于line-height小知识
weixin_50613714的博客
09-08 576
line-height解释 line-height就是行高，即文本行基线间的垂直距离文章参考 两个红色基线之间即为行高 line-height=上间距+文字高+下间距 为什么line-height=边框高就会垂直居中 上间距+文字高+下边距=line-height=边框高 上下边距相等，因此文字部分在边框中就垂直居中了 ...
line-height含义
三傻的博客
08-22 4536
定义 如果是多行文字，line-height = 每一行文字基线之间的距离。 如果是单号文字，line-height = 上间距 + 文本的高度+下间距。并且上间距等于下间距。 基线 基线指的是文字的下边缘，不同的字体，基线位置会有细微的差别，大致位置是字母x下边缘。 盗图： line-height值 1. normal 默认值。相当于当前字体尺寸的1.2倍。 2. number 与当前字体...
tinyMCE富文本编辑器的line-height行高插件使用指南
### TinyMCE富文本编辑器line-height行高插件知识点概述 TinyMCE是一个广泛使用的JavaScript富文本编辑器，它被集成在众多Web应用程序中，允许用户在网页上直接进行富文本的创建和编辑。TinyMCE的一个显著特点是它...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值