两个inline-block的盒子并排显示问题

最新推荐文章于 2023-01-25 09:26:56 发布

Only One698

最新推荐文章于 2023-01-25 09:26:56 发布

阅读量1.6k

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_60526471/article/details/127327825

版权

多个div使用display:inline-block时候div之间有间隔

这个问题让我很是困惑，直到查询了好多个文章，才明白是怎么回事！！！

如图1：两个inline-block的盒子中间有空隙，

如图2：当两个并排的盒子宽度都是40px，外边的大盒子宽度设置为80px时，两个盒子就不会排列在一排，

图1 图2

解决方法1：在父系上加font-size:0；然后，在子div上加一个font-size设置你需要的字体大小

原因：

display:inline-block表示行内块元素，后面自带空格字符（盒子的

之间的空格和回车折算成了字符），所以有空隙，如果想去掉空隙，在父系上加font-size:0；但是这样的话字体就看不见了，所以还需要在子div上加一个font-size

代码如下：

<style>
    .container{
        width: 80px;
        background-color: aqua;
        font-size: 0;
    }
    .div1{
        display: inline-block;
        width: 40px;
        background-color: blue;
        font-size: 19px;
    }
    .div2{
        display: inline-block;
        width: 40px;
        background-color: brown;
        font-size: 19px;
    }
</style>
<body>
    <div class="container">
        <div class="div1">1</div>
        <div class="div2">2</div>
    </div>

</body>

父级字体大小为0，两个子级字体大小相同，此时确实是可以实现并排显示，但是当两个子级字体大小不同时，会出现如下情况：

出现这种错位的原因，其实是因为我们编写css所使用的编辑器，给每一个元素都添加了一个默认的vertical-align:baseline;属性；baseline是基线对齐的意思，基线即我们所写的文本文档的最后一行文字的底线，比如蓝色盒子的基线就是“1”的底线，而棕色盒子的基线就是“2”的底线，从图中我们可以很明显的看到，这两条线是对齐了的，这就是导致错位的原因。
要解决这个问题其实也很简单，只需要将vertical-align的值改为top、middle等其他的值就可以了。

解决方法2：

给父盒子加上 display:flex;设置为弹性盒子，

弹性盒子中的子级块级元素会并排显示。（这个应该不用解释了吧）

以上均为个人体会，如若内容有误，欢迎提出。