CSS中解决文字高度上下存在留白的问题

1. 问题

我们使用CSS为字体设置：font-size 后，发现高度会比正常UI设计的要高一些，字体的上下存在一部分留白区域占位置。
如图所示：

.test{font-size: 24px;
}

2. 解决方法

原因： 字体有默认行高。

方法一：给它设置 line-height 为 1；

.test{font-size: 24px;line-height: 1;
}

方法二：给它设置 line-height 等于它的 font-size；

.test{font-size: 24px;line-height: 24px;
}

效果：

3. 关于 line-height 属性的拓展知识

定义： line-height 属性设置行间的距离（行高）。
注意： 不允许使用负值。
说明：
该属性会影响行框的布局。
在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。
可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

名称	描述
默认值：	normal
继承性：	yes
版本：	CSS1
JavaScript 语法：	object.style.lineHeight=“2”

可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

浏览器支持
表格中的数字注明了完全支持 line-height 属性的首个浏览器版本。

浏览器名称	最低支持版本
谷歌	1.0
IE	4.0
火狐	1.0
safari	1.0
opera	7.0

CSS中解决文字高度上下存在留白的问题相关推荐

css中的文字竖排和间距控制
css中的文字竖排和间距控制文字的竖排和间距控制竖排代码: <DIV style="WRITING-MODE:tb-rl;TEXT-ALIGN:left">< ...
[tips]css中实现文字色彩渐变
css中实现文字色彩渐变 tailwind写法: 必要的只有text-transparent bg-clip-text 对应color: transparent background-clip:tex ...
CSS中的文字对齐问题
要了解css中文字的对齐问题,首先要了解文字在浏览器中的基线baseline,基线在浏览器的位置如图所示: 由于基线的存在,当图片和文字在一行中显示时,底部将无法对齐. 我们可以看到这张图片的底部出现 ...
HTML/CSS中，DIV高度自适应的解决方法
在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变. 这里我就列举两种情况: ① 顶部为一排菜单栏,下部为内容部.其中,要求,菜单栏高度固定,内容部随着浏览器窗口大小的改变而改变, ...
html css div 高度自适应,HTML/CSS中，DIV高度自适应解决办法
获取content高度 *{color:#fff} .header{ height: 40px; width:100%; position: fixed; top:0; left:0; backgro ...
css float 高度,CSS中浮动float 高度自适应
文章总结了浮动float 高度自适应及在这过程中碰到的一些问题方法总结. 先来看一个示例效果的对比: 这是清除浮动之前的效果.可以明显看到column1,column2,column3这三个浮动元素的 ...
最全的css中解决外边距合并问题
外边距合并首先,我们先来看一下什么是外边距合并. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们 ...
CSS中实现文字两端对齐的方法，登陆注册界面经常用到
在写登陆或注册界面时,经常会遇到文字两端对齐(word中有类似对齐方式)的问题,如下图: 用户名和密码并没有两端对齐,那么该怎样处理其实只需要两行CSS代码就可以解决: 关键两行是:text-ali ...
html中英文字母占几个px,CSS中解决英文字母、数字过长或者文本撑开网页
例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,将表格伸的很长很长,而汉字字符却可以自动换行. 原因是: 英文字母之间如果没有空格, ...

CSS中解决文字高度上下存在留白的问题

1. 问题

2. 解决方法

3. 关于 line-height 属性的拓展知识

CSS中解决文字高度上下存在留白的问题相关推荐

最新文章

热门文章

CSS中 解决文字高度上下存在留白的问题

1. 问题

2. 解决方法

3. 关于 line-height 属性的拓展知识

CSS中 解决文字高度上下存在留白的问题相关推荐

最新文章

热门文章

CSS中解决文字高度上下存在留白的问题

CSS中解决文字高度上下存在留白的问题相关推荐