inline-block、inline-flex 元素高度问题

老牛•浏览 1124•评论 0•发表于 4 年前

一、示例代码

<div>
    <div class="inline-block-box">
        <div style="display: inline-block;font-size: 16px;line-height: 1">inline-block</div>
        <div style="display: inline-block;font-size: 16px;line-height: 1">inline-block</div>
    </div>
    <div class="inline-flex-box">
        <div style="display: inline-flex;font-size: 16px;line-height: 1">inline-flex</div>
    </div>
</div>

二、问题描述

预期效果是，inline-block-box 和 inline-flex-box 两个元素的高度都是 16px；实际上两者都是 24px：

原因在于：虽然我们为文本设置了字号 16px，行高 1，最终 div 高度为 16px。但父元素继承了 html 的 1.5 倍行高，inline-block-box 和 inline-flex-box 的实际高度要乘以 1.5，也就是 24px。

三、总结

3.1 方案一

要避免此类问题也很简单，如果要固定行内元素的高度，直接在其父元素指定字号和行高即可。

修复后的示例代码如下：

<div>
    <div class="inline-block-box" style="font-size: 16px;line-height: 1">
        <div style="display: inline-block;">inline-block</div>
        <div style="display: inline-block;">inline-block</div>
    </div>
    <div class="inline-flex-box" style="font-size: 16px;line-height: 1">
        <div style="display: inline-flex;">inline-flex</div>
    </div>
</div>

3.2 方案二

使用 flex 布局：

<div>
    <div class="inline-block-box" style="display: flex">
        <div style="display: inline-block;">inline-block</div>
        <div style="display: inline-block;">inline-block</div>
    </div>
    <div class="inline-flex-box" style="display: flex">
        <div style="display: inline-flex;">inline-flex</div>
    </div>
</div>

同样也可以避免此问题。

暂无评论，快来发表评论吧~

私信

老牛@ilaoniu

老牛，俗称哞哞。单纯的九零后理工小青年。喜欢折腾，爱玩，爱音乐，爱游戏，爱电影，爱旅游...

最后活跃于 9 小时前