父容器设置行高，内联块级和块级子元素的高度会怎样？

父容器只设定行高，子元素为块级或内联块级对父容器的影响

当父容器设置了行高，子元素为内联块级或块级时，其高度会受到影响。

行内块级子元素 (inline-block)

行内块级子元素的默认高度是由其内容决定的，例如字体大小和字体类型。然而，当父容器设定了行高，内联块级子元素的高度也会受行高影响。因为行高定义了父容器内文字的行高，也间接影响了内联块级元素的”内容”。因此，可能导致父容器高度被子元素撑大。

块级子元素 (block)

块级子元素的默认高度由其内容或明确设置的高度决定。当父容器设定了行高，行高对块级子元素没有影响，因为块级子元素的高度不受行高约束。因此，块级子元素的高度和父容器的高度不会因行高设定而改变。

示例

如下代码示例演示了上述情况：

.box {   line-height: 60px;   background-color: antiquewhite; }  .box .item {   display: inline-block; // 设置为块级，则高度为 40px   width: 600px;   height: 40px;   background-color: beige; }

在该示例中，当子元素.item为内联块级时，父容器.box的高度会被撑大到 60px，这是因为行高影响了内联块级元素的高度。而当子元素.item为块级时，父容器.box的高度保持为 40px，不受行高影响。