首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

深入理解line-height

但是line-height 具有可继承性,块级元素的子元素会继承该特性,并且在行内元素上生效。 一般情况下,浏览器默认的line-height为1.2。...可以自定义 line-height 覆盖这个初始值,那么该怎样设置line-height呢?有以下5种方式: line10.png line-height是个可继承属性,它的继承规则比较复杂。...inherit :继承父元素line-height的值,所以父元素的是多少就是多少。 如果其后代元素不设置line-height 的话,也会是这个值。...这个长度值(20px)会被后代元素继承,所有的后代元素会使用这个相同的、继承的 line-height (20px),除非后代元素设定 line-height 。...即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的line-height,它继承的不是百分比而是父元素line-height计算后的最终值。

1.9K71
您找到你想要的搜索结果了吗?
是的
没有找到

CSS行高line-height的理解建议收藏

这是个看上去很简单的问题,是理解line-height非常重要的一个问题。可能有人会认为是:文子撑开的!文子占据空间,自然将div撑开。...我一开始也是这样理解的,但是事实上,深入理解inline模型后,我发现,根本不是文字撑开了div的高度,而是line-height!哟证明很简单(如下测试代码): css代码: <!...这就说明撑开div高度的是line-height不是文字内容。 到底这个line-height行高怎么就产生了高度呢?在linline box模型中,有个line boxes,这个是看不见的。...line boxes只是个考察汇报人员,考察它的手下谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。...例如,取手下line-height最高的值.则

50510

CSS深入理解学习笔记之line-height

3、line-height与内联元素的高度机理 关于内容区域高度:①内容区域高度只与字体以及字号有关,与line-height没有任何关系;②在simsun字体下,内容区域高度等于文字大小值。...4、line-height各类属性值 line-height:normal/// /inherit; normal:默认属性值。与浏览器和元素字体相关。...因此为了让各个浏览器兼容性一致,要初始化line-height。 :使用数值作为行高值。line-height = number * font-size :使用具体长度值作为行高值。...line-height = percent * font-size inherit:行高继承。IE8+ 问题:line-height:1.5/150%/1.5em的区别 答:计算无差别。...body全局数值行高使用经验: 匹配20px使用,为了方便心算:line-height = 20px / 14px = 1.42857 由于chrome是19px,所以body 5、line-height

87850

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )

文章目录 一、color 文本颜色 二、text-align 文本对齐方式 三、line-height 行间距设置 四、text-indent 首行缩进设置 五、text-decoration 文本装饰设置...中的内容 , 包括字标签中的内容 , 也一并居中对齐 ; 1918年5月15日 鲁迅 收藏本文 展示效果如下 : 三、line-height...行间距设置 ---- line-height 属性 , 用于 设置 行间距 , 又称为 行高 ; line-height 属性 取值 : 像素 px : 最常用的单位 , 一般情况设置 行高 比字号大...16 px , 行高为 24 px 即可 ; 相对值 em ; 百分比 ; ] 默认情况下 行间距 显示效果如下 : 设置了行间距后 : p { line-height...缩进像素值 , 不常用 ; 百分比值 : 指定 相对于浏览器窗口的百分比值 , 不常用 ; 笨一点的方式可以使用   进行缩进 , 如果段落过多 , 操作及其繁琐 ; 代码示例 : p { line-height

1.7K30
领券