CSS字体容器高度比字体大，这是有字体行高的问题

最新推荐文章于 2022-12-25 22:37:09 发布

23朵毒蘑菇

最新推荐文章于 2022-12-25 22:37:09 发布

阅读量1.2k

点赞数

分类专栏：前端 css 文章标签： css css3

本文链接：https://blog.csdn.net/wjlhanhan/article/details/111308646

版权

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

css

2 篇文章

订阅专栏

博客指出写CSS时，设置字体大小为12px，容器高度却更高，原因是默认行高大于字体大小。虽提及推荐配色网站和附上问题解决小站文字，但核心围绕CSS字体与容器高度问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写css时，有时给字体大小设置为12px，可是文字所处的容器高度却比12px高，这是因为行高的问题，默认的行高一般都大于字体大小。

解决办法如下：

//给字体所在的容器添加如下css
line-height: 1; //1表示行高为字体大小的一倍，这样就行了

推荐一个配色网站毒蘑菇配色
最后附上问题已解决小站一篇文字

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

23朵毒蘑菇

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 数字和字母将容器撑大问题解决

09-27

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法。

IE6下css设置容器高度的BUG不能小于某个值

09-25

`）或者` `标签来强制容器高度，同时将行高（line-height）也设置为0，虽然这种方法可以使得容器高度小于2px，但是会发现存在与父容器字体大小相关的外边距问题。 3. 同时将字体大小（font-size）和行高（line-...

参与评论您还未登录，请先登录后发表或查看评论

CSS布局中设置字体文字大小值大于行高值.docx

11-22

CSS布局中设置字体文字大小值大于行高值.docx

css中字的大小,字体大小大于CSS中设置的大小

weixin_36386962的博客

08-03

405

当我将字体大小设置为特定像素高度时，计算出的字体大小是我在CSS中设置的大小的1.333倍。但是，如果我将字体大小设置为百分比，则使用正确的大小。这种情况发生在我尝试的每个浏览器中，包括Firefox 3.6.28，Firefox 53.0.3(32位和64位)，Internet Exploiter，Safari，Chrome和Opera。 / p>以下是问题的缩减示例：TocMenu Te...

文字高度大于容器高度解决办法

weixin_43227938的博客

07-09

356

文字高度大于容器高度的解决办法

关于给字体大小设置大小，但是结果撑开的高度大于字体大小的问题

weixin_30342827的博客

07-18

563

就像这样，这个大小既不是内间距也不是外间距，它是由于字体的行高导致的，这个时候，注意一下在reset的时候将行高设置为1就不会出现这种问题了转载于:https://www.cnblogs.com/kugeliu/p/7199697.html...

CKEditor插件应用：如何设置字体行高

### CKEditor 设置字体行高的插件知识点 CKEditor是一个广泛使用的文本编辑器，它允许用户在网页上直接编辑HTML内容。随着内容管理系统的普及，CKEditor作为一个重要的组件，其功能的扩展显得尤为重要。特别是在...

text-show插件，容器大小固定，根据文字多少来调节显示的字体大小

10-13

3. **CSS样式控制**：虽然插件会自动调整字体大小，但开发者仍然需要通过CSS来设定容器的固定大小以及文本的基本样式，例如颜色、行高、对齐方式等。 4. **文本格式化**：`text-show`专注于调整字体大小，但若需...

CSS技巧：轻松实现字体纵向拉伸与宽高比例调整

在CSS中，我们可以设置字体的高度，这影响到字体在其容器中的垂直展开。默认情况下，字体的高度通常是为了适应字体设计的最佳比例，但这并不意味着我们就不能改变它。通过调整`line-height`属性，我们可以在不改变...

头歌教学实践平台 Web前端开发基础 CSS-文本与字体样式

最新发布

01-20

4. 行高：`line-height`属性控制文本行之间的间距，有助于提高可读性，如`line-height: 1.5;`。 5. 颜色：使用`color`属性改变文本颜色，可以使用颜色名称、十六进制、RGB或RGBA值，如`color: #333;`。二、文本...

html一个盒子里文字会溢出,html盒子问题，内容撑起盒子高度，却导致了盒子最下面空白...

weixin_35102377的博客

06-04

992

在div中设置一张图片，并在css中将div宽度设置为520px，然后图片宽度=520px，按照布局来说应该是盒子高度会被内容撑起，但是结果却是在div下面有道白色空白区域，如果设置了div高度=图片高度就没问题，这是为什么呢？下面上代码：*{padding:0;margin:0;}div{/*box-sizing:border-box;*//*height:270px;*/width:520px...

探究fontsize与字体height关系

曹定栓的博客

02-17

6589

对于笔者用的ProximaNova这个字体，设置font-size为30px，实际上高度为42px。为什么文字的高度不等于字号的高度？这得从字体设计说起。为此装了一个FontForge和RoboFont软件设计一款自己的字体。

line-height:1+overflow:hidden的奇妙反应

qq_35190388的博客

04-22

1795

个人理解字体度量、line-height和vertical-align 这几天遇到个样式问题bug，当标签设置为line-height:1;overflow:hidden，部分英文（pqg等）下半部分会被遮挡。简单的标签结构和css属性如下，展示效果为：中文文字部分正常，英文下部分被遮挡。 <div class="contanier"> <div class="cell"> <span>我只是个文字测试，我什么都不知道</span&

BFC神奇背后的原理

qq_43288110的博客

09-26

364

一、BFC定义　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。　　二、BFC布局规则 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相...

CSS 中的字号与行高

qq_21916259的博客

10-15

2213

问题：设置字号大小为 20px , 然而真实字体高度却不是20px，为什么??? 一、设计的字体设计字体的三个参考线：上线、基线、下线如图所示： 字体大小 = 顶线(ascender) + 底线(descender) 假设将字体高度设置为1000个单位 (这个数值根据设计师的设计而来，可以更改) 以上图为例：字体的真实高度 = (ascender - (-descender)) ...

CSS行高的测量

LFXZ603的博客

05-14

1159

一般默认的字体大小为16px 行高是相邻行“基线”之间的距离，是包含行间距的使用line-height设置行高时，除去字体大小剩下的距离会在行的上边和下边平分，即：行高=字体大小+上边距+下边距（同时上边距等于下边距）所以当设置行高为盒子大小的时候可以使文字在垂直方向居中，如果行高小于盒子大小那么文字偏上，如果行高大于盒子大小那么文字偏下 ...

一个由line-height引发的血案与思考

YiYing's sharing

05-07

2246

原文地址：一个由line-height引发的血案与思考爆炸最近UI走查，发现页面中所有包含文字区块的高度与设计稿中的高度完全不一致，然后UI妹子就爆炸了! 找了一下原因，发现是由于UI设计稿中设计的文字大部分是font-size:24px;line-height:24px,代码实现时为了不至于每处都写一遍字体大小，故直接在根节点上统一设置字体与字体大小为24px，小部分不一致...

34、CSS进阶——行高的取值以及常见的长度单位

lvh98的博客

08-10

567

行高的取值以及常见尺寸单位的介绍。

fontsize与line-height关系

m0_60909419的博客

12-25

2732

注意2：比如有个父盒子div或者p，他是已经有默认的字体格式和字体大小16px了（除非你自己设置字体或者字体大小或者行高），又因为每一个子元素都会继承字体的属性，这意味着什么，意味着父盒子中的每一行的line-height已经确定了（除非你自己去修改子元素的字体属性），例如给父盒子p设置font-size为20px，那他的行高可能为20*1.3=26px，此时你给子元素设置其他的字体格式或者字体大小，那可能会出现这个子元素行高还没父元素高。区域，但不会增加内容区域高度（甚至是line-box高度）。