CSS line-height 失效2

案例1

<div class="head">
    你好，西南石油大学。
</div>

.head{
     text-align: center;
     background: #333;/* 设置整个背景为黑色，便于观察字体 */
     color: red;

     line-height: 100px;/* 设置行高，让字体居中 */
     font:700 18px simsun;/* 对字体进行设置 */
}

效果图：

line-height失效了。

案例2： 

把line-height放到font下面。

.head{
     text-align: center;
     background: #333;/* 设置整个背景为黑色，便于观察字体 */
     color: red;

     font:700 18px simsun;/* 对字体进行设置 */
     line-height: 100px;/* 设置行高，让字体居中 */
 }

 效果图：

line-height又生效了。

总结：在使用CSS line-height属性时，line-height属性必须在font属性下面否则无效。font-size则不会有影响。 

---

原文链接：

https://blog.csdn.net/Kobe_G/article/details/82807676