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

最新推荐文章于 2022-08-10 17:25:56 发布

23朵毒蘑菇

最新推荐文章于 2022-08-10 17:25:56 发布

阅读量1.1k

点赞数

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

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

版权

前端同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

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

解决办法如下：

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

23朵毒蘑菇

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

深入剖析 CSS：字体度量、行高和垂直对齐

m0_57290114的博客

04-14

1637

Line-height并且是简单的 CSS 属性。如此简单，以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们。但事实并非如此。它们真的很复杂，也许是最难的，因为它们在创建CSS鲜为人知的功能之一（内联格式设置上下文）方面发挥着重要作用。vertical-align 例如，可以设置为长度或无单位值line-height1，但默认值为。好吧，但什么是正常的？我们经常读到它是（或应该是）1，或者可能是1.2，甚至是normalCSS规范在这一点上尚不清楚.我们知道无单元是相对的，但...

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

352

当我将字体大小设置为特定像素高度时，计算出的字体大小是我在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

302

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

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

weixin_30342827的博客

07-18

540

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

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

09-27

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

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

10-13

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

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

最新发布

01-20

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

HTML5&CSS3网页制作：字体样式属性.pptx

06-01

5. **font属性**：这是一个综合性属性，允许一次性设置多种字体样式，包括字体风格、变体、粗细、大小和行高。基本语法格式为：`font: font-style font-variant font-weight font-size/line-height font-family;`。 ...

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

weixin_35102377的博客

06-04

925

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

探究fontsize与字体height关系

曹定栓的博客

02-17

5368

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

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

qq_35190388的博客

04-22

1516

个人理解字体度量、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

325

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

CSS 中的字号与行高

qq_21916259的博客

10-15

2003

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

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

YiYing's sharing

05-07

2167

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

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

lvh98的博客

08-10

507

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

CSS中英文和中文高度不一样问题的解决办法 (实用)

chelen_jak的专栏

03-01

4945

现状：一样的字体，一样的大小。中文行高要比数字的要高，如下图：方法一：改用等中、英文等高字体定例如宋体，如下图： font-family: "宋体",Simsun; 方法二：使用line-height固定高度，如下图： line-height: 19px; 想进步了解可以参考资料： 1、css中英文字母和汉字行高不同解决方法 2、【css】探究font-size、文本实际高度、line-...

CSS在显示行高不一的问题解决方法

weixin_34138377的博客

09-06

419

相信很多朋友在写CSS的时候都会遇到过这样的问题：英文字母和汉字的行高不一样，导致在全汉字、全英文字母以及汉字字母混合时设置好的margin或 padding 属性出现偏差。当然这种情况之存在于IE浏览器，Safari、Google Chrome、Firefox、Opera均不存在类似的问题。产生的原因： 1、全汉字的时候：一般情况在选中文本可以看出汉字是上对齐的（具体表...

CSS字体与布局教程：样式详解

在这个CSS样式说明中，我们主要关注与字体和文本布局相关的属性。 1. **字体大小和颜色**： - `font-size: 11px;` 是用来定义元素的字体大小，单位可以是像素（px）、em、rem等，这会影响元素内文本的尺寸，以便...