line-height如何继承

最新推荐文章于 2025-03-08 11:07:53 发布

HonGL54

最新推荐文章于 2025-03-08 11:07:53 发布

阅读量359

点赞数 1

分类专栏： css 文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/qq_38396070/article/details/107636833

版权

css 专栏收录该内容

15 篇文章

订阅专栏

本文详细解析了CSS中行高的三种设置方式：具体数值、比例和百分比，并阐述了各自的继承规则，帮助开发者理解如何在网页布局中精确控制文本行间距。

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

body{
	font-size:20px;
	// line-height : 30px;		(p元素line-height：直接继承30px)
	// line-height : 1.5;		(p元素line-height：16乘1.5 = 24px)
	// line-height：200%		(p元素linehgiht：20 乘 200% = 40px)
}

p{
	font-size:16px	
}

写具体数值，如30px，直接继承该值
写比例，如2或1.5，则继承该比例
写百分比，如200%，则继承计算出来后的值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HonGL54

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS -- line-height属性继承问题

Sun_blog

07-23

837

line-height属性继承问题 line-height: 50px 数值形式，子元素line-height = 父元素line-height line-height: 1.5 比值（小数）形式，子元素line-height = 父元素line-height * 子元素font-size line-height: 100% 百分比形式，子元素line-height = 父元素line-height * 父元素font-size 页面效果父元素font-size: 20px; 子元素font-size:

CSS深入理解之line-height

热门推荐

literarygirl的博客

02-12

1万+

以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。定义三问：什么是基线？为何是基线？需要两行？如图红色线即为基线基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！（*线指任意线）第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已

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

02 line-height如何继承问题?

qq_37550440的博客

05-06

446

1. 父级line-height=30px的情况，子元素line-height是多少 <div class="con"> <p>一段关于line-height的故事</p> </div> .con { font-size: 20px; line-height: 30px; } p { /* 此时继承line-height:30px */ font-size: 16px;

【CSS面试题】图文样式--line-height的如何继承？

Milk~每天分享一点点，技术进步一点点

07-17

306

Line-height的如何继承？写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解）比如body中line-height设为2，则p标签继承line-height为2,则算出来的p标签line-height为font-size * 2 =32px; 写百分比，比如200%，则继承计算出来的值(考点)—当前的font-size * 200% 例子中：20 * 200% = 40px; 核心代码演示：初始化 <style> bo

面试官问：css line-height是如何继承的

最新发布

粉丝们务必加入微信粉丝群

03-08

165

line-height属性在 CSS 中是继承的，但有一些特殊之处。它的继承规则如下：继承自父元素：line-height是一个继承属性，这意味着子元素默认会继承父元素的line-height值。数值继承：如果父元素的line-height设置为一个数值（如1.5），子元素也会继承这个数值。但是，这个数值会影响到字体的行高，因为它是相对于该元素的字体大小进行计算的。百分比继承：如果父...

line-height 属性的继承问题

weixin_30514745的博客

05-05

267

淘宝商城的 detail 页面“产品详情”部分是商家自定义区块，曾出现这样一个问题： <style type="text/css"> p { line-height:17px; } </style> <div class="mdse-detail"> <p> <strong style="font...

CSS line-height 是如何继承的？

josavion的博客

11-18

387

写具体数值，如30px，则直接继承；写比例，如2 / 1.5，按继承比例；写百分比，如150%，则继承计算出来的值，这里需要格外注意；

line-height的继承问题

2202_75311997的博客

07-04

249

时，子元素line-height直接继承具体数值。时，子元素line-height数值为。时，子元素line-height数值为。父元素 line=height有。父元素 line=height为。父元素 line=height为。

CSS line-height的如何继承的问题

11-19

当讨论`line-height`的继承时，我们需要理解它如何在不同的元素层级间传递和计算。首先，`line-height`可以有四种不同的设置方式： 1. **具体数值**：如`30px`，这种情况下，子元素会直接继承这个具体的数值。 2. ...

css中height和line-height区别

01-19

line-height：行高设置文字间上下距离 height：高度就是定义一个层或某样东西的高度啦也就是说line-height是特指单行...line-height有继承属性，所以正文部分内容line-height最好设置为为数字1.5，也就是字体高

css中一些常用的font-size字体单位和line-height详解

11-20

关于`line-height`的继承特性，与`font-size`不同，当`line-height`使用em单位时，子元素不会继承em的值，而是继承了转换为px的固定值。而当`line-height`设置为无单位的数字时，这个值是可以继承的，并且子元素的...

【面试题】line-height继承问题

zx1041561837的博客

11-19

1085

本文介绍了父元素的line-height值在不同情况下，子元素line-height的继承结果。

line-height继承问题

m0_49117214的博客

09-09

104

继承的line-height为50px { font-size: 20px; line-height: 50px; } 继承的line-height为30px { font-size: 20px; line-height: 1.5; } 继承的line-height为40px { font-size: 20px; line-height: 200%; } ...

line-height的继承

aliven1的博客

09-24

183

body { font-size: 20px; line-height: 200%; } p { background-color: #ccc; font-size: 16px; } 用了百分比之后，会根据body的font-size,计算行高；行高是40px;

在html中高度可以继承吗,css中line-height继承的问题

weixin_28432777的博客

06-19

1366

作为新手，在写样式的时候会遇到各种css的问题，尤其是细节处理上，刚开始学css时，line-height继承的问题也是一个常碰到的，后来虽然不断地学习中，也慢慢就知道了，但没有记录下来。最近自己正在收集一些知识点和经验，作为收藏，由于文字功底不好，关于line-height这个问题，本文也只是粗糙记录了一下。大家都知道元素的 line-height 属性值会继承父元素(或祖先元素)的 line-...

line-height的继承性，height line-height 背景填充的方式

JiM-W 的博客

12-14

3313

line-height继承性 height 背景填充