父元素line-height属性如何影响块级和行内块级子元素的高度？

在CSS中，line-height属性用于设置文本行的高度。对于父元素来说，line-height属性不仅会影响其内部的文本行高，还会影响其块级和行内块级子元素的高度，具体影响方式如下：

1. 对行内块级子元素的影响

行内块级元素（inline-block）的行为类似于行内元素，但它们可以设置宽度和高度。父元素的line-height会直接影响行内块级子元素的垂直对齐方式。

• 默认对齐方式：行内块级子元素的基线（baseline）会与父元素的基线对齐。父元素的line-height会影响子元素的垂直对齐位置。
• 高度计算：如果行内块级子元素没有显式设置高度，父元素的line-height可能会影响子元素的高度计算，尤其是在子元素内部包含文本时。

2. 对块级子元素的影响

块级元素（block）默认会占据父元素的整个宽度，并且会从新的一行开始。父元素的line-height对块级子元素的影响相对较小，但仍然存在一些间接影响。

• 文本内容：如果块级子元素内部包含文本，父元素的line-height会影响这些文本的行高。
• 垂直对齐：块级子元素内部的文本行高会受到父元素line-height的影响，但块级子元素本身的高度不会直接受到父元素line-height的影响。

3. 具体示例

假设有以下HTML结构：

<div class="parent">
  <div class="child-block">块级子元素</div>
  <span class="child-inline-block">行内块级子元素</span>
</div>

对应的CSS样式：

.parent {
  line-height: 2;
}

.child-block {
  background-color: lightblue;
}

.child-inline-block {
  display: inline-block;
  background-color: lightcoral;
}

• 行内块级子元素：.child-inline-block的垂直对齐方式会受到.parent的line-height影响。如果.child-inline-block内部有文本，这些文本的行高也会受到.parent的line-height影响。
• 块级子元素：.child-block的高度不会直接受到.parent的line-height影响，但如果.child-block内部有文本，这些文本的行高会受到.parent的line-height影响。

4. 总结

• 行内块级子元素：父元素的line-height会直接影响其垂直对齐方式和内部文本的行高。
• 块级子元素：父元素的line-height主要影响其内部文本的行高，而不会直接影响子元素本身的高度。

理解这些影响有助于更好地控制页面布局和文本排版。