div{
font-size: 10px;
/*line-height: 160px; */
/*line-height: 2; */
/*line-height: 2em; */
background-color: #ccc;
}
div span{
font-size: 80px;
/*line-height: 2em;*/
/*line-height: 2;*/
/*line-height: 160px;*/
/*line-height: 20px;*/
/*line-height: inherit;*/
/*background-color: orange;*/
}
<div>
<span>
阿哇哈哇哈哈哈哈娃哈哈我和我哈哈
</span>
</div>
查找的时候 发现手册上说的line-height默认是normal
但操作的时候(父级是div,子级是div含文本)发现 无论父级line-height设置的有无单位 效果都是inherit
觉得line-height默认应该是inherit
于是改换成父级div 子级span含文本
第一次
想法是吧父级line-height设置成160px 那子级会自动继承这160px 如果自己设置的话 就会覆盖掉这个160px
有自己的line-height,但问题就来了
先不考虑父级,只考虑子级的line-height的话 ,那最后灰色部分应该是160px+160px=320px,如图,跟预想的一样
第二次
父级设置line-height: 160px
子级不设置,让他自己继承(为了验证line-height默认是inherit 这里有给子级加上line-height:inherit,效果是一样的。这里的截图是没有加上的)
效果是:灰色区域高度是377px左右,不是预想的320px,如图
第三次
父级设置line-height: 160px
子级也设置line-height: 160px
想用子级覆盖父级,出现刚才第一次得效果
但是效果跟第二次一样,好像子级的Line-height没有覆盖父级一样
情况大致这样子,还试了line-height为em和没有单位的情况,在子级为div元素时和预想的一样,该继承的继承,该覆盖的覆盖,但把子元素换成span就出现各种不解
问题就是:
1.line-height默认是inherit吧,是inherit吧。。?
2.若是继承,为什么会出现以上那种情况,子级line-height没有覆盖父级line-height?
3.320px可以理解,377px左右这个数据是怎么出来的?
看我码了这么多字的情况下大牛们帮帮我