2 qq 34289537 qq_34289537 于 2016.03.14 19:42 提问

CSS中,line-height与font-size关系

如果font-size大于line-height会怎么显示,这幅图该怎么理解图片

4个回答

showbo
showbo   Ds   Rxr 2016.03.15 11:43
已采纳

font-size大于line-height会溢出容器显示,如果容器增加overflow:hidden就会隐藏溢出的内容

 <div style="font-size:20px;line-height:12px">abb</div>
<div style="font-size:20px;line-height:12px;overflow:hidden">abb</div>
u013772876
u013772876   2016.03.14 21:32

css中 line-height和font-size之间的关系,首先需要理解line-height的意思,它是css中表示的行高,font-size的意思是字体的大小,如多少px,之间关系是字体大小越大,那么必然的行高是肯定比较大的,这2者一般都是用于文字排版时更加美观一些,一般还要结合height使用,让文字垂直居中,具体请看代码:

#div{ width:300px; height:200px; } #div1 p{ height:30px; font-size:14px; line-height:30px; }

我是测试文字


qq_34289537
qq_34289537 我就想知道如果fontsize大于lineheight会怎么显示
2 年多之前 回复
u013772876
u013772876   2016.03.14 21:32

css中 line-height和font-size之间的关系,首先需要理解line-height的意思,它是css中表示的行高,font-size的意思是字体的大小,如多少px,之间关系是字体大小越大,那么必然的行高是肯定比较大的,这2者一般都是用于文字排版时更加美观一些,一般还要结合height使用,让文字垂直居中,具体请看代码:

#div{ width:300px; height:200px; } #div1 p{ height:30px; font-size:14px; line-height:30px; }

我是测试文字


u010837612
u010837612   2016.03.15 09:32

别看那么多概念。只要知道font-size是调整文字的大小。line-height的作用是这样的:如果div高为40px,那么也设置line-height为40px,div内的文字就会上下居中。

qq_34289537
qq_34289537 这个我是知道的,就是好奇下如果fontsize大于lineheight会怎么显示,毕竟是可以这么写的,而且显示结果很奇怪
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
重新认识font-size、line-height和行高
重新认识font-size、line-height和行高line-height,font-size均是css格式中很常设置的样式,这两个样式会对元素产生什么影响呢?从样式的名字来看,分别代表行高和字体大小的意思,那么line-height真的等于行高吗?font-size又是否和行高有关系呢?基本定义首先来看一些术语的基本定义 line-height:line-height属性是指文本行基线之间的距
关于line-height行高 与 font-size 的讲解
line-height属性的具体定义列表如下: 语法: line-height : normal | | | | inherit 说明: 设置元素中行的高度。 值: normal:默认行高,一般为1到1.2; 实数:实数值,缩放因子; 长度:合法的长度值,可为负数; 百分比:百分比取值基于元素的字体尺寸。 初始值: normal 继承性: 继承 适用于: 所有元素 媒体:
css中font的简写方法(包括font-weight,font-size,line-height,font-family)
font:字体粗细 字体大小/行高 字体样式 例子: font: bold 12px/18px Arial, Helvetica, sans-serif ;
css中height和line-height
转载:转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] css行高line-height的一些深入理解及应用 by zhangxinxu from http://www.zhangxinxu.com 一、前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看。
font-size 与line-height:14px; 小记
font-size:24px;    line-height:14px; 字的上下留白就是 (24-14)/2 = 5p
Jquery 设置字体大小(font-size)与行高(line-height)
Jquery 设置字体大小(font-size)与行高(line-height)
css中的line-height小知识
本文内容是根据张鑫旭老师视频课程内容编写的 line-height定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 所有内联元素的表现斗鱼行内框盒子模型有关 行内框盒子模型包含4种盒子 (1)内容
行高不设单位的好处 line-height:1.8
今天无意间看了到了line-height:1.8 感觉挺有意思的,然后翻了下行高的知识,发现还挺有文章的,不妨温故而知新。 先回顾下:顶线、中线、基线、底线 vertical-align是元素的垂直对齐方式,也依赖于这些线,分别有top(顶线对齐)、middle(中线对齐)、baseline(基线对齐)、bottom(底线对齐) 行距与行高(文本行的基线间的距离):
div 中img 有间隙问题的解决,line-height=0 line-height 等于0
方案1:img添加display:block                              方案2:外层div添加 line-height:0px;
CSS中line-height和height的区别
CSS中的line-height一般指的是布局里面的一段文字,上下行之间的高度,比如第一行文字顶部到第二行文字的顶部,这就为行高。 height一般指的是容器的整体高度。 那么line-height和height有什么区别呢? 如果一个DIV容器高度是20px,字体是12px,那可以显示完全显示一整行的文字,上下分别多出3px,如果行高是18px,文字为多行的话,则从第二行起