css中line-heigth失效

最新推荐文章于 2023-05-22 21:29:53 发布

weixin_30436891

最新推荐文章于 2023-05-22 21:29:53 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jx-z/p/10457676.html

在CSS中，当使用font属性设置字体时，它会包含line-height的默认值，这可能导致先前单独设置的line-height属性失效。解决办法是在font属性中明确指定line-height值。

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

css中，写了这样的两行：

line-height: 200px;

font: 20px Arial;

结果line-height失效了。

原因是font中包含了line-height的赋值(默认值normal)，导致前面的200px被层叠覆盖了。

font连写时，line-height写在font-size的后面==> font-size/line-height

转载于:https://www.cnblogs.com/jx-z/p/10457676.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30436891

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于css中line-height(行高)设置无效的问题的解决方法

12-13

关于css中line-height(行高)设置无效的问题我们先写下这一串代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .head{ height: 100px; text-align: center; line-height: 100px;/* 设置行高，让字体居中 */ background: #333;/* 设置整个背景为黑色，便于观察字体 */ color: re

line-height失效或者被过滤器过滤的问题

你若成风，我则化雨

04-11

881

line-height 是设置行间距离（行高）的一种方法该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计...

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

为什么line-height不起作用

z007pig的博客

11-18

5493

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

设置line-height无效的解决办法

qq_37471721的博客

06-20

9143

今天在做项目的时候遇到一个很奇怪的问题，明明设置了line-height,可是文字并没有垂直居中，大概如下：效果如下显然line-height没有生效，后来发现font组合属性不能写到line-height后面，如果写到line-height后面的话要把属性分开写，font-weight:bold,font-size:16px,font-family:‘微软雅黑’,这样写也是可以的。更改...

CSS line-height 失效

zbailing的博客

07-04

1955

正常样式 line-height失效样式带有文字的按钮样式不受影响，但只有图标的按钮line-height已失效 line-height失效原因文本写在了html标签外后，line-height失效了 ...

CSS line-height 失效2

zbailing的博客

07-11

432

案例1 <div class="head"> 你好，西南石油大学。 </div> .head{ text-align: center; background: #333;/* 设置整个背景为黑色，便于观察字体 */ color: red; line-height: 100px;/* 设置行高，让字体居中 */ ...

一次关于line-height 属性失效的问题排查

星宇大前端

05-22

1598

今天同事说了一个问题，一个web 工程里突然样式竖直方向不居中了全部失效，我帮忙看了下。结果看了一个小时也没有解决，最后猜出来的，反向推出原因，记录一下。

css_行高line-height失效

qq_57226103的博客

04-11

551

linear-height要写在font下面，或者不用font复合属性，用font-size、font-style、font-weight、font-family单独设置字体属性。设置line-height与容器高度相等，行内原素垂直不居中。

line-height：属性中文失效解决方案

wstwlk的专栏

04-22

864

破洛洛文章简介：我们在IE9常常会遇见自己写的DIV CSS网页，文字有时不能垂直居中，究竟IE9 line-height设置文字不能垂直居中原因是什么？我们在IE9常常会遇见自己写的DIV CSS网页，文字有时不能垂直居中，究竟IE9 line-height设置文字不能垂直居中原因是什么？ IE9不支持line-height原因：中文ie9不支持英文字体相信大家在IE9看见自己使用li

line-height失效解决办法

小白博客

07-22

1万+

对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身img,input,select,object高度)/2px 0; vertical-align:middle-------垂直居中同时该属性指挥对inline-block元素起作用哟 ...

css line height无效,关于css中line-height(行高)设置无效的问题的解决方法

weixin_39972996的博客

08-03

2449

关于css中line-height(行高)设置无效的问题我们先写下这一串代码：Document.head{height: 100px;text-align: center;line-height: 100px;/* 设置行高，让字体居中 */background: #333;/* 设置整个背景为黑色，便于观察字体 */color: red;font:700 18px simsun;/* 对字体进行...

【转载】解决IE6下的行高line-height失效问题

cy_619的博客

05-19

444

BUG症状：当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；受影响的浏览器：Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Exp

css设置line-height无效,为什么设置span的line-height属性无效？

i_am_a_div的博客

09-27

1647

css设置line-height无效,为什么设置span的line-height属性无效？

line-height和font冲突

m0_61915032的博客

12-29

260

line-height和font冲突

css3 lineheight,CSS line-height

weixin_29252859的博客

08-03

193

CSS line-heightRunStack editorUnstack editorExamplep {font-size: 5vw;padding: 0 5vw;line-height: 1.8em;}CSS line-height is similar to leading in desktop publishing - it determines the "line height" (s...

关于css中line-height(行高)设置无效的问题

最新发布

01-03

### 解决 `span` 标签中 `line-height` 样式失效的问题当遇到 `span` 标签中的 `line-height` 属性不起作用的情况时，通常是因为 `span` 是行内元素，默认情况下不会像块级元素那样响应某些 CSS 属性。为了使 `line-height` 生效，可以考虑以下几种解决方案。 #### 方法一：将 `span` 转换为行内块元素通过将 `span` 的显示模式改为 `inline-block`，可以让其更好地处理高度和宽度属性，并使得 `line-height` 正常工作[^2]。 ```html <div class="container"> <span class="centered-text">居中文本</span> </div> ``` ```css .container { height: 50px; width: 500px; border: 1px solid black; } .centered-text { display: inline-block; vertical-align: middle; line-height: 50px; } ``` 这种方法不仅解决了 `line-height` 失效的问题，还实现了文本的垂直居中效果。 #### 方法二：使用 Flexbox 布局 Flexbox 提供了一种更现代的方式来实现复杂的布局需求。对于简单的水平和垂直居中问题，Flexbox 可以提供简洁而强大的解决方案。 ```html <div class="flex-container"> <span class="flex-item">居中文本</span> </div> ``` ```css .flex-container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 50px; width: 500px; border: 1px solid black; } .flex-item { /* 不需要额外设置 line-height 或其他特殊样式 */ } ``` 此方法无需调整 `span` 的内部样式即可达到理想的居中效果。 #### 方法三：调整父容器的高度与子元素一致如果希望保持 `span` 作为纯行内元素，则可以通过确保父容器具有足够的高度来间接影响 `line-height` 的表现形式[^4]。 ```html <p class="text-line-height"> 这里是一些<span>居中的</span>文字。 </p> ``` ```css .text-line-height { font-size: 16px; line-height: 1.5em; /* 设置合理的行间距 */ height: calc(1.5 * 16px); /* 让容器高度等于预期的一行高度 */ } ``` 这种方式适用于不需要严格控制尺寸的情况下简单应用 `line-height` 来对齐单行内的多个元素。