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

珍惜时间，勤奋学习！今天给大家带来《父容器设置行高，内联块级和块级子元素的高度会怎样？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

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

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

行内块级子元素 (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，不受行高影响。

以上就是《父容器设置行高，内联块级和块级子元素的高度会怎样？》的详细内容，更多关于的资料请关注golang学习网公众号！