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

Question

 .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>

Answer 1

因为父盒子设置了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.

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

大概率是和空格有对齐方式的变化。

• vertical-align: top;
• 删除空格
• 改成 flex 布局
• 修改 font-size

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。