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

父元素line-height属性对子元素高度的影响机制详解

CSS布局中，父元素的line-height属性对子元素高度的影响常常令人费解。本文将深入分析仅设置line-height属性的父元素，其块级和行内块级子元素高度的响应机制。

考虑以下代码示例：

  哈哈哈

.box {
  line-height: 60px;
  background-color: antiquewhite;
}

.box .item {
  width: 600px;
  height: 40px;
  background-color: beige;
}

当.item元素的display属性设置为inline-block时，父元素.box的高度会受line-height属性影响。这是因为行内块元素的高度，若未设置height属性，则由其内容高度决定。父元素的line-height会影响子元素内容的垂直空间，导致子元素高度扩展至line-height的值（60px），进而撑高父元素。

然而，如果.item元素的display属性设置为block，情况则不同。块级元素的高度由其自身内容和height属性决定，不受父元素line-height影响。因此，.item元素的高度仍为其自身设置的40px，父元素.box的高度也随之为40px。

总结：line-height属性对行内块元素高度的影响显著，它会调整行内块元素的“内容高度”，进而影响父元素高度；而对块级元素，line-height属性的影响较弱，块级元素高度主要由其自身属性决定。因此，子元素的display属性是决定父元素line-height属性对其高度影响程度的关键因素。