css：文字默认高度问题

最新推荐文章于 2023-11-15 17:29:49 发布
最新推荐文章于 2023-11-15 17:29:49 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40745143/article/details/123654778
版权

开发过程中，设置文字高度60px,实际页面显示的高度可能是80px，造成与ui设计图还原度不够，
解决方法：

line-height: 1;

下图显示：文字高度为60px+1px边框，高度应该是62px
实际页面高度为：82px
在这里插入图片描述

设置：line-height: 1;后
在这里插入图片描述

sunly_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入剖析 CSS：字体度量、行高和垂直对齐
m0_57290114的博客
04-14 1600
Line-height并且是简单的 CSS 属性。如此简单，以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们。但事实并非如此。它们真的很复杂，也许是最难的，因为它们在创建CSS鲜为人知的功能之一（内联格式设置上下文）方面发挥着重要作用。vertical-align 例如，可以设置为长度或无单位值line-height1，但默认值为 。好吧，但什么是正常的？我们经常读到它是（或应该是）1，或者可能是1.2，甚至是normalCSS规范在这一点上尚不清楚.我们知道无单元是相对的，但...
CSS教程：行高line-height属性(1)
12-10
行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整行高（line-height）可以减低阅读的困难与枯燥，...
css中文字高度的问题
weixin_33691817的博客
11-07 804
今天用Firefox的Web Develop插件对一个网页的元素高度进行测量时发现，一个包含一行12px的文本的div的高度居然为14px而不是12px。 后来才知道，原来文本的行高默认为1.2，所以文本的高度为12*1.2=14px 特地写上来，大家引以为鉴 转载于:https://blog.51cto.com/skyintheseacjt/223...
CSS 文本高度的问题
WangYan的博客
11-03 687
开发中，一个文本写了10px，但是它的实际高度居然是16px。后来发现，原来文本的行高有个默认值，所以文本的高度为：lineHeight*fontSize=realHeight。 因此，如果需要文本高度跟字号大小保持一致，name设置下line-height即可！ ...
css总结6：行高和字体大小
anjiye7641的博客
03-18 1021
1 CSS line-height 属性 代码： p.small {line-height:70%}p.big {line-height:200%} 运行后：70%与200%宽高 2 CSSfont-size属性 h1 {font-size:250%;}h2 {font-size:200%;}p {font-size:100%;} 两者特点： ...
css文字行高是多少,深入了解CSS字体度量，行高和vertical-align（二）
weixin_39987926的博客
08-04 509
Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。CSS 无所不能我们已经讨论过了line-height和vertical-align在一起是如何工作，但现在的问题是如何使用CSS来控制字度的度量指标？简洁回答：没有。即使真的如此，我也想我们应该可以做些什么？那么有关于字体度量，我们应该能够做些什么？例如，如果我们想要给文本使用Catamaran字体，可以...
CSS使用calc()获取当前可视屏幕高度的实现
11-19
先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。...
HTML+CSS总结.doc
11-17
CSS 的 div 元素默认情况下，一行只能容纳一个 div 标签。无论宽度多小，一行始终只有一个 div 标签。 margin-left 属性和 margin-right 属性分别设置 div 的左右边距，当设置 div 左外边距和右外边距的值为 auto ...
IE浏览器下的CSS问题小结
12-13
确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。 2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定...
css入门笔记
05-15
问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） 常用的样式属性...
CSS字体、行高等其他样式
XzXz0207的博客
11-22 1078
CSS字体、行高等其他样式
css控制文本的行高
『程序员·小李』的博客
12-31 2046
line-height可以控制文本的行高 示例 <p> 这是一个标准行高的段落。 在大多数浏览器默认行高约20 px。 这是一个标准行高的段落。 这是一个标准行高的段落。 </p> <p class="p1"> 这是一个更小行高的段落。 这是一个更小行高的段落。 这是一个更小行高的段落。 这是一个更小行高的段落。 </p> <p class="p2"> 这是一个更大行高的段落。 这是一个更大行高的段落。 这是一个更大行高的段落。 这是一个
css设置盒子的默认高度
qq_39687662的博客
07-20 395
用min-height属性即可
CSS 中的字号与行高
qq_21916259的博客
10-15 1939
问题： 设置字号大小为 20px , 然而真实字体高度却不是20px， 为什么??? 一、设计的字体 设计字体的三个参考线： 上线、基线、下线 如图所示： 字体大小 = 顶线(ascender) + 底线(descender) 假设 将字体高度设置为1000个单位 (这个数值根据设计师的设计而来，可以更改) 以上图为例：字体的真实高度 = (ascender - (-descender)) ...
css 字号与行高
最新发布
w710537643的博客
11-15 291
什么是字号大小？字号大小就是字体的高度，例如设置字号为50px，那么它的高度如下图所示：什么是行距呢？如下图所示：其中半行距 = (lineHeight – fontSize) / 2。但是实际上，—font-size经常不等于渲染的高度，如下图所示：对于笔者用的ProximaNova这个字体，设置font-size为30px，实际上高度为42px。为什么文字的高度不等于字号的高度？这得从字体设计说起。为此装了一个FontForge和RoboFont软件设计一款自己的字体。
CSS多行文本固定高度的居中
u800820的专栏
06-14 864
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display 属性能够模拟，所以我们可以使用这个属性来让模拟就可以使用vertical-align了。注意，display:table和 display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一
css 中字体大小
z . s . j
11-14 1294
css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif; 这里的20px/24px是指的什么, 这个斜杠表示什么呢? 解答：font有多个属性，我写的时候一般就用缩写：font:normal 12px/22px "宋体";这样的意思是:字体不加粗，字号是12px，行高是22p
html和css中出现需要调整标签<label>的高度和宽度
不能堕落的小黑粉
06-02 7614
        html中标签&lt;label&gt;&lt;/label&gt; 为表单元素定义文字标注，&lt;label&gt;属于内联元素，元素前后没有换行符，并且不可以设置高度。        若想要设置高度，需要设置&lt;label&gt;的display属性，默认属性是inline，此时元素会被显示为内联元素，元素没有换行符，只需要在inline后面加上block，即displa...
CSS中width height的默认问题
m0_56174842的博客
01-06 510
css
css文字竖排效果且垂直居中水平居中
05-25
实现文字竖排效果，可以使用CSS的writing-mode属性，设置为vertical-rl（从上到下，从右到左）。垂直居中可以使用flex布局，设置父元素display:flex; align-items:center;。水平居中可以使用text-align:center;，如下所示： HTML代码： ``` <div class="vertical-text"> <p>竖排文字</p> </div> ``` CSS代码： ``` .vertical-text { writing-mode: vertical-rl; /* 文字竖排 */ display: flex; /* 父元素flex布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; /* 设置高度，方便演示 */ } .vertical-text p { margin: 0; /* 去除默认的外边距 */ text-align: center; /* 水平居中 */ font-size: 24px; /* 设置字体大小 */ line-height: 1.5; /* 设置行高，让文字竖排更美观 */ } ``` 效果如下图所示： ![CSS文字竖排效果且垂直居中水平居中](https://img-blog.csdnimg.cn/20211203202724219.png)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值