父元素设 line-height 后，inline-block 与 block 子元素高度表现为何不同

在前端开发中，当我们为父元素设置 line-height 时，常常会发现 inline-block 与 block 子元素的高度表现存在差异。理解这种差异，对于精确控制页面布局和元素显示效果至关重要。

首先来看 block 子元素。当父元素设置了 line-height 时，block 子元素的高度通常不受父元素 line-height 的直接影响。这是因为 block 元素具有独立的渲染特性，它会根据自身内容的实际高度来进行布局。例如，一个包含文本内容的 div 作为 block 子元素，它的高度主要由文本的行数和字体大小等因素决定，父元素的 line-height 并不会强行改变其高度。即使父元素的 line-height 很大，block 子元素依然会按照自身的逻辑来确定高度，这使得布局相对稳定，不会因为父元素的 line-height 设置而产生意外的变化。

而 inline-block 子元素的表现则有所不同。当父元素设置 line-height 后，inline-block 子元素会受到一定影响。这是因为 inline-block 元素既具有行内元素的特点，又具备块级元素的特性。父元素的 line-height 会影响到 inline-block 子元素在垂直方向上的对齐方式和所占空间。如果 inline-block 子元素内部没有足够的内容撑开高度，那么它的高度可能会受到父元素 line-height 的约束。比如一个空的 inline-block 元素，它的高度可能会与父元素的 line-height 相关，甚至可能出现高度被拉伸的情况，以适应父元素的行高设置。

造成这种差异的根本原因在于 CSS 盒模型和渲染机制。block 元素遵循块级元素的布局规则，其高度计算独立于父元素的 line-height。而 inline-block 元素在参与行内布局时，需要考虑与父元素行高的关系。

在实际开发中，我们要根据具体的布局需求来选择合适的元素类型和样式设置。对于需要稳定高度且不受父元素行高干扰的情况，block 元素是较好的选择；而当需要元素在垂直方向上与父元素行高有一定关联时，inline-block 元素则能发挥其优势。只有深入理解这些差异，才能编写出更高效、更精准的前端代码。