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

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

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容