请教关于line-height的继承问题

大学僧信息技术基础 2013-05-19 09:29:32

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左右这个数据是怎么出来的?

看我码了这么多字的情况下大牛们帮帮我
...全文
59 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,124

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧