父容器只设定行高，子元素为块级或内联块级对父容器的影响
当父容器设置了行高，子元素为内联块级或块级时，其高度会受到影响。
行内块级子元素 (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，不受行高影响。
以上就是父容器设置行高，内联块级和块级子元素的高度会怎样？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
232
