CSS 行高 line-height属性

article/2025/5/15 2:46:44

在CSS中,通过 line-height属性来定义行高,行高是指相邻两行文本基线之间的垂直距离。

那什么是基线呢?对任何一个行内非替换元素,其内容区都会存在四条假想的线,分别是底线(bottom)、基线(baseline)、中线(middle)、顶线(top),它们就类似于书写英文时的四线三格。如图 3‑14 所示:

baseline、bottom、middle、top示意图图3-14 baseline、bottom、middle、top示意图

尽管在字体大小发生改变时,这些线相互之间的距离也会随之改变,但无论如何,这四条线的位置是确定的。底线就是 g、j、y 等字母的底边线,基线就是 a、c、x 等字母的底边线,中线是小写字母 x 垂直中线(即基线往上 0.5ex 的位置),顶线是 b、h、j 等字母的顶边线。

如果在一个块级元素上声明 line-height 值,这个值将会应用到块中的所有内容,而不论内容是否包含在行内元素中,即对匿名行内框也依然有效。所以,常常为一个段落元素声明 line-height 值,来指定段落每行文本的行高。

由于 line-height属性具有继承性,因此,可以只在父元素中定义 line-height 规则,而不必在所有子元素中显式地声明 line-height。

line-height属性可以用百分比、长度值、数值进行定义,其值可以是正值,也可以是负值:

1)百分比:根据元素本身的 font-size 计算值的百分比计算行高。如,段落的 line-height属性值为 200%,段落元素的 font-size 为 14px,则行高为 200% * 14px = 28px。

2)长度值:设置固定的行高,可以使用绝对单位或相对单位。若使用相对单位em,则根据元素本身的 font-size 计算值的倍数计算行高。如,段落的 line-height属性值为 2em,段落元素的 font-size 为 14px,则行高为 200% * 14px = 28px。

3)数值:根据元素本身的 font-size 计算值的倍数计算行高。如,段落的 line-height属性值为 2,段落元素的 font-size 为 14px,则行高为 2 * 14px = 28px。

当使用百分比或长度单位时,子元素继承的是计算出来的行高的值,这就导致子元素无法根据自身的 font-size 自动调整行高,当子元素使用的字号比父元素大时,子元素可能出现文本重叠现象,故这种方法将被淘汰。

使用数值时,尽管子元素也会继承,但继承的是该数值本身,而不是计算出来的行高。这样一来,子元素就可以根据自身的 font-size 来调整行高,不会出现文本重叠现象。所以,使用数字,是设置行高最理想的方法。

无论使用百分比、长度值、数值中的哪种方式,都可以在 font 属性中,使用缩写方式来定义 line-height,其写法是 line-height 的值紧跟在字体大小和一个斜杠后面。如:

 
  1. body {
  2. font: 14px/2 arial;
  3. }

上述写法就等价于:

 
  1. body {
  2. font-size: 14px;
  3. line-height: 2;
  4. font-family: arial;
  5. }

根据CSS规范,line-height属性只会影响行内元素,而不会直接影响块级元素,但却会影响块框的布局。在块级元素上声明 line-height属性,是为该块级元素中的行内框设置一个最小行高,而不是实际行高。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。


http://chatgpt.dhexx.cn/article/iiKN3lfP.shtml

相关文章

P53-前端基础CSS-行高设置

P53-前端基础CSS-行高设置 1.概述 行高(line height) 行高指的是文字占有的实际高度可以通过line-height来设置行高 行高可以直接指定一个大小(px em)也可以直接为行高设置一个整数如果是一个整数的话,行高将会是字体…

CSS行高背景

一.行高 1.定义: 行高上距离内容高度下距离 其中 上距离下距离 2.应用场景 让单行文本在盒子中垂直居中对齐。在浏览器中行高是跟随字体大小变化的。 所以我们让文字的行高等于盒子的高度。 div{ height:50px; line-height:50px; } 3.行高与盒子高度的三种关系 如…

css控制文本的行高

line-height可以控制文本的行高 示例 <p> 这是一个标准行高的段落。 在大多数浏览器默认行高约20 px。 这是一个标准行高的段落。 这是一个标准行高的段落。 </p> <p class"p1"> 这是一个更小行高的段落。 这是一个更小行高的段落。 这是一个更小…

CSS行高line-height属性理解及应用

行高的概念看上去很简单——文字行的高度&#xff0c;其实&#xff0c;行高所涉及到的基础知识&#xff0c;对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味&#xff0c;因此适当地调整行高&#xff08;line-height&#xff09;可以减低阅读的困难与枯…

css行高和盒子高区别

行高 什么是行高 在css中所有的行都有自己的行高。 .box1 {border: 1px solid black;width: 200px; }<div class"box1">我是文字</div>被撑起来的高度就是行高 line-height属性 line-height: 60px;80px就是行高 注意点&#xff1a; 1.行高和盒子的…

css 行高

1. 什么是行高&#xff0c;以及行高的概念 我们可以试想一下&#xff0c;为什么会要有行高。我现在不需要行高不是完全可以的嘛。 我们可以仔细看看这个&#xff0c;这不是很正常的嘛。 那我们来看看这个&#xff0c;那当我们第一次看到这个的时候你觉得是横着度&#xff0c;…

css行高(line-height)及文本垂直居中原理

css行高&#xff08;line-height&#xff09;及文本垂直居中原理 一、行高的定义 标准定义&#xff1a;两行文字基线之间的距离。 那么什么是基线&#xff1f; 基线是在英文字母中用到的一个概念&#xff0c;我们刚学英语的时使用的那个英语本子每行有四条线。在 CSS 中&am…

css设置1.5倍行高,CSS怎么控制行高?

CSS怎么控制行高&#xff1f; css中&#xff0c;调整每行文字字体间距(行距)是使用line-height属性。 ● line-height 属性设置行间的距离(行高)。 注&#xff1a;不允许使用负值。 要实现上下换行文字行间距行高样式其实我们只用对文字所在对象设置line-height样式即可&#x…

css字行高怎么设,css文本行高怎么设置-电脑自学网

css文本行高的设置方法&#xff1a;首先新建文件&#xff0c;使用div标签创建一行文字&#xff1b;然后编写样式&#xff0c;设置div标签的class属性为mybkkd&#xff1b;最后通过div标签的class属性mybkkd设置文字上下的行高。 本教程操作环境&#xff1a;windows7系统、css3版…

CSS行高(line-height)使文本垂直居中详解

一.场景重现 在我们的静态页面设计中&#xff0c;在我们的块级元素中写入文字时&#xff1a; <div class"center">我想在中间</div> .center{height: 50px;background-color: #008c8c;} 会发现我们最后在网页显示的效果为&#xff1a; 这明显不太美观…

CSS行高

CSS行高 line-height 一.网页中的文本 文本中的每一个字符都有一个不可见的框&#xff0c;这些框又被放在两条不可见的横线中&#xff08;垂直居中&#xff09;&#xff0c;两条横线的距离就是行高&#xff0c;放个图片理解下 二.行高的设置方法 1.直接设置 p{ line-heigh…

css行高包含哪些,详解CSS行高

“行高”即CSS中line-height所描述的属性&#xff0c;它表示两行文字间基线之间的距离&#xff0c;不允许使用负值。在弄清行高之前&#xff0c;我们先来了解几个概念: 顶线、中线、基线、底线 上图所示线条从上到下为&#xff1a; 1 2 3 4 5 6 7 8 9 10 vertical-align:top; /…

CSS行高——line-height

初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了&#xff0c;随着以后工作问题层出不穷&#xff0c;才逐渐了解到CSS并不是几个style属性那么简单&#xff0c;最近看了一些关于行高的知识&#xff0c;就此总结一下。 所谓行高是指文本行基线间的垂…

深入理解css行高line-height

1.行高的定义 行高是相邻两行文本基线之间的垂直距离。看清楚是基线&#xff0c;估计有很多前端搞了几年的都说不出个所以然。小时候我们写英文26个英文字母的单词本&#xff08;随便找个图&#xff09; 一行里面有四条线&#xff0c;在css中一个行内非替换元素&#xff08;例…

strlen

strlen strlen计算长度 strlen计算长度 strlen在计算长度时&#xff0c;一定要注意计算的字符串中是否含有\0字符&#xff08;请注意&#xff0c;0和\0是有区别的&#xff0c;0代表数字&#xff0c;\0代表转义字符&#xff0c;值是48&#xff09;&#xff0c;比如你希望算0x12…

数字图像处理第九章——形态学图像处理

数字图像处理第九章 数字图像处理---形态学图像处理&#xff08;一&#xff09;预备知识1.1 集合理论中的基本概念1.2 二值图像、集合及逻辑算子 &#xff08;二&#xff09;膨胀和腐蚀2.1 膨胀2.2 结构元的分解2.3 strel函数2.4 腐蚀 &#xff08;三&#xff09; 膨胀与腐蚀的…

MATLAB教学_09影像处理二

本文视频地址&#xff1a;https://www.bilibili.com/video/av68228488?p9 主要学习了初阶影像处理。有三个内容&#xff1a; 图像阈值背景预测相关连的标签 计算米粒颗数 先将图片二值化。那么有米粒的区域应该是1&#xff0c;而没有的地方就是0。那么去计算有多少个一大群…

【计算机视觉】图像增强——图像的形态学操作

个人简介&#xff1a; > &#x1f4e6;个人主页&#xff1a;赵四司机 > &#x1f3c6;学习方向&#xff1a;JAVA后端开发 > ⏰往期文章&#xff1a;SpringBoot项目整合微信支付 > &#x1f514;博主推荐网站&#xff1a;牛客网 刷题|面试|找工作神器 > &#…

数字图像处理实验(七)| 形态学图像处理{生成结构元素strel、腐蚀运算imerode、膨胀运算imdilate、开运算imopen、闭运算imclose}(附代码和实验截图、汉字视力表项目、总结)

文章目录 一、实验目的二、实验仪器三、实验原理1. 结构元素&#xff1a;2. 腐蚀运算&#xff1a;3. 膨胀运算&#xff1a;4. 开运算&#xff1a;5. 闭运算&#xff1a; 四、实验内容:1. 形态学图像处理用于图像边界提取2&#xff0e;数学形态学用于图像的噪点去除&#xff08;…

【2】MATLAB中strel('disk',r)的C实现

strel 是MATLAB中常用的类型&#xff0c;即是structuring element&#xff0c;用来构建结构元素。opencv中与其相似的函数是getStructuringElement()这个函数。 这里仅仅说是相似主要是因为两者还是有很多区别的。 getStructuringElement()可以获取常用的结构元素的形状&…