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

line-height 属性在 CSS 中用于设置文本行的高度。它对块级元素和行内块级元素的高度有不同的影响，具体取决于元素的类型和内容。

1. 块级元素（Block-level Elements）

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

• 如果块级元素包含文本：line-height 会影响文本行的高度，从而间接影响块级元素的高度。如果块级元素的高度没有明确设置（即 height: auto），那么块级元素的高度会根据其内容（包括文本行高）自动调整。

• 如果块级元素不包含文本：line-height 对块级元素的高度没有直接影响。

2. 行内块级元素（Inline-block Elements）

对于行内块级元素，line-height 不仅影响其内部文本的行高，还会直接影响元素本身的高度。

• 如果行内块级元素包含文本：line-height 会直接影响元素的高度。行内块级元素的高度会根据 line-height 的值和文本内容自动调整。

• 如果行内块级元素不包含文本：line-height 仍然会影响元素的高度。即使没有文本内容，行内块级元素的高度也会受到 line-height 的影响。

示例

<div class="block-element">
  This is a block-level element with some text.
</div>

<div class="inline-block-element">
  This is an inline-block element with some text.
</div>

.block-element {
  line-height: 2; /* 影响文本行高，间接影响块级元素高度 */
  border: 1px solid black;
}

.inline-block-element {
  display: inline-block;
  line-height: 2; /* 直接影响行内块级元素的高度 */
  border: 1px solid black;
}

总结

• 块级元素：line-height 主要影响其内部文本的行高，间接影响元素高度（如果高度未明确设置）。
• 行内块级元素：line-height 直接影响元素的高度，无论是否包含文本。

理解 line-height 对不同类型的元素的影响，有助于更好地控制布局和文本的垂直对齐。