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

line-height 属性在 CSS 中用于设置文本行的高度。它会影响块级元素和行内块级子元素的高度，具体影响方式取决于子元素的类型和布局方式。

1. 对块级子元素的影响

对于块级子元素，line-height 属性通常不会直接影响其高度。块级元素的高度主要由其内容、内边距（padding）、边框（border）和外边距（margin）决定。

然而，如果块级子元素内部包含文本内容，line-height 会影响这些文本的行高，从而间接影响块级子元素的高度。例如：

.parent {
  line-height: 2; /* 行高为字体大小的2倍 */
}

.child {
  font-size: 16px;
}

在这个例子中，.child 是一个块级元素，如果它包含文本，那么文本的行高将是 16px * 2 = 32px。如果 .child 内部有多行文本，那么 .child 的高度将根据这些行高累加。

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

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

当行内块级子元素内部包含文本时，line-height 会影响这些文本的行高，从而影响行内块级子元素的高度。例如：

.parent {
  line-height: 2; /* 行高为字体大小的2倍 */
}

.child {
  display: inline-block;
  font-size: 16px;
}

在这个例子中，.child 是一个行内块级元素，如果它包含文本，那么文本的行高将是 16px * 2 = 32px。因此，.child 的高度将至少为 32px，除非通过其他方式（如 height 属性）显式设置高度。

3. 特殊情况：空的行内块级子元素

如果行内块级子元素是空的（即没有内容），line-height 仍然会影响其高度。这是因为行内块级元素的高度默认由其 line-height 决定。

.parent {
  line-height: 2; /* 行高为字体大小的2倍 */
}

.child {
  display: inline-block;
  font-size: 16px;
}

在这个例子中，即使 .child 是空的，它的高度也将是 16px * 2 = 32px。

4. 总结

• 块级子元素：line-height 主要影响其内部文本的行高，间接影响元素高度。
• 行内块级子元素：line-height 直接影响其高度，尤其是当元素包含文本或为空时。

理解 line-height 如何影响子元素的高度对于控制布局和文本排版非常重要。