html-CSS中，line-height与font-size关系

问题描述

CSS中，line-height与font-size关系: 如果font-size大于line-height会怎么显示，这幅图该怎么理解

解决方案

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>

解决方案二：

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;
}

我是测试文字

解决方案三：

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;
}

我是测试文字

解决方案四：

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