CSS中line-height属性详解(CSS之四)

最新推荐文章于 2023-11-10 15:25:27 发布
最新推荐文章于 2023-11-10 15:25:27 发布
阅读量1.2w 收藏 41
点赞数 8
分类专栏： css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44653329/article/details/108172478
版权

CSS中line-height属性详解

基本概念

line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。

在这里插入图片描述
图中两行基线之间的距离就是行高，基线相关可以查看CSS属性vertical-align详解（CSS之五）。上一行的底线和下一行的底线之间的距离就是行距。
行距 = line-height - font-size

取值

值 描述
normal 默认。设置合理的行间距
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元
最低0.47元/天 解锁文章
文滨
关注
  • 8
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css属性行高line-height的用法详解
12-13
不过，行间距与半行间距，还是取决于CSS中的line-height。那么，如何来使用line-height呢？ 默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值：p｛line-height:...
我确信你还没有完全搞明白它的含义! 熬夜整理了一万多字的line-height详细总结,还看不懂那我真的要跪了！
极客小俊
02-25 3957
干了5年前端开发,居然不知道line-height ?
【line-height】 line-height详解
03-27 1万+
本文摘自不同文章，楼主自己汇总集合，对比概念，相对比较全面。 楼楼自己的博客：http://blog.csdn.net/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
常用的line-height使内容垂直居中，你真的懂它的原理吗？
piglite的专栏
06-04 5667
如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二行的1-2+2-3，因为css中每一行的上间距和下间距肯定是相等的，所以代换一下，行高就等于它本身的上间距+下间距+文本高度。本例子中，我们设置div的高度为200px，然后里面有一行文本，我们设置了行高为200px，设置完200px后，文字本身16px不会改变，变的是它的上间距和下间距。可以发现和上面的例子代码位移不一样的地方是文本变多了一些，先来看一下此时的效果。
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的上下加上半行距 ** 取值 ** 值
CSS深入理解之line-height
literarygirl的博客
02-12 1万+
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。 一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。 定义三问： 什么是基线？ 为何是基线？ 需要两行？ 如图红色线即为基线 基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线） 第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
line-height行高
zhouming1107的博客
03-09 1335
line-height,文字垂直居中
CSS line-height行高上下居中垂直居中样式属性
12-08
**CSS line-height属性详解：行高与垂直居中** 在网页设计中，`line-height` 是一个非常重要的CSS样式属性，用于控制元素内部文本行之间的垂直间距，它可以帮助实现文字和图片的上下居中，以及单行或多行文本的垂直...
css中一些常用的font-size字体单位和line-height详解
11-20
在CSS中，`font-size`和`line-height`是两个重要的样式属性，它们分别用于设置字体大小和行高。下面将详细阐述这两种单位及其在实际应用中的效果。 首先，我们来了解一下`font-size`中常用的单位： 1. **px (像素)...
详解HTML中字体使用line-height依然不能垂直居中解决办法
11-19
这是因为在CSS中，`font`属性是一个简写，可以同时设置`font-size`, `font-style`, `font-weight`, `font-variant`, `font-stretch`, `font-family`等属性，当它包含`font-size`时，`line-height`会被覆盖。...
CSS 关于line-height详细讲解
Q_3603的博客
09-24 2139
带你快速深入认识line-height属性！！！
CSS中的line-height属性
weixin_30251587的博客
05-03 1671
一、line-height的定义 line-height属性设置行间的距离（行高），不允许使用负值。指文本行基线间的垂直距离。 1、基线 一个文半行一共有四条线，从上到下依次是顶线、中线、基线、底线；在英文中，基线为小写x字母下边缘所在的那条线。如图所示。 注意：基线的位置与字体有关，不同字体基线的位置有偏差。 2、行高控制行间距 在多行文本中，第...
CSS line-height属性
m0_49662897的博客
02-21 9200
CSS line-height属性
line-height含义
三傻的博客
08-22 4318
定义 如果是多行文字，line-height = 每一行文字基线之间的距离。 如果是单号文字，line-height = 上间距 + 文本的高度+下间距。并且上间距等于下间距。 基线 基线指的是文字的下边缘，不同的字体，基线位置会有细微的差别，大致位置是字母x下边缘。 盗图： line-height值 1. normal 默认值。相当于当前字体尺寸的1.2倍。 2. number 与当前字体...
CSS小课堂：一文搞懂line-height和vertical-align
zjjcchina的博客
06-30 619
我们看到，div依然和上面显示span标签时撑开了相同的高度，这是由于div自己的字体大小是100px，不论其中是不是直接写了文字，div里的图片也会有基线对齐的情况，不过图片是以其底边和父元素里的x底边对齐。我们可以看到①②的高度是一致的，所以此时span标签位置在div中是正好居中的，但是由于CSS字体在设计的时候不会正好占据内联盒子内容区的1/2处，一般来说会有一些下沉，所以文字显示效果是近似居中的。行框上边界要包裹住所有内联盒子的上边界，行框的下边界要包裹住所有内联盒子的下边界。
CSS中line-height属性的值分别代表什么
weixin_51747462的博客
09-14 1134
CSS中line-height属性的值分别代表什么；line-height: 1.5
CSS基础：你必须要知道的行高属性 line-height
最新发布
WangMin@汪末末
11-10 3882
CSS中的行高（line-height）是指网页中每行文字之间的距离，就是对于同一行内的不同内容，行高决定它们之间的间距。换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。合理设置文字行高不仅能够让网页更加美观与整洁，还能够增加用户的视觉与阅读体验，在大段文字中，合适的行高可以让用户阅读起来更加舒适。你可能还是不明白行高是什么？下面我通过几图来仔细给大家讲一下吧！
深入剖析 CSS：字体度量、行高和垂直对齐
m0_57290114的博客
04-14 1610
Line-height并且是简单的 CSS 属性。如此简单，以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们。但事实并非如此。它们真的很复杂，也许是最难的，因为它们在创建CSS鲜为人知的功能之一（内联格式设置上下文）方面发挥着重要作用。vertical-align 例如，可以设置为长度或无单位值line-height1，但默认值为 。好吧，但什么是正常的？我们经常读到它是（或应该是）1，或者可能是1.2，甚至是normalCSS规范在这一点上尚不清楚.我们知道无单元是相对的，但...
你对 line-height 是如何理解的
LuckXinXin的博客
02-27 509
line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中 line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会 .
"CSS3样式表-字体、文本、背景属性详解
文本属性则包括color、direction、line-height、letter-spacing、text-align、text-decoration、text-indent、text-transform、word-spacing等，通过这些属性可以设置文本颜色、对齐方式、行间距等。背景属性则包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值