父元素只设置了line-height,子元素是块级 或 行内块级对父元素的影响？

作者站长头像
站长
· 阅读数 5
 .box {
                line-height: 60px;
                background-color: antiquewhite;
            }

            .box .item {
                display: inline-block; // 此处如果设置block，父元素高度有变化，为什么？
                width: 600px;
                height: 40px;
                background-color: beige;
            }

 <div class="box"><a href="#" class="item">哈哈哈</a></div>
回复
1个回答
avatar
test
2024-07-08

因为父盒子设置了line-height. 子盒子.item是行内块元素, 而因为行内块(inline-block)与行内元素(inline)的高(在不设置高的情况下, 行内元素不能设置高)是由 内容 决定的, 一般就是指文字大小(font-size)/文字字体(font-family) . 但是 时父盒子设置了line-height, 这也就意味着行内块(inline-block)与行内元素(inline)的 内容 就变成了line-height, 与文字大小(font-size)/文字字体(font-family)无关了. 因此此时父盒子高是60, 是被子盒子撑大大了.

当子盒子.item设置为block是, line-height不会对.item产生作用 就没有了上面提到的内容 因此.item高是40, 撑大父盒子也就是40.

answer imageanswer image

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容