css常见问题（3）之解决inline-block布局缝隙问题

咲氺

已于 2023-01-03 09:44:04 修改

阅读量612

点赞数

文章标签： css 前端 css3

于 2020-07-16 10:10:50 首次发布

本文链接：https://blog.csdn.net/qq_29039105/article/details/107376131

版权

当使用inline-block进行布局时，两个块元素之间会存在一个几px宽的缝隙。这是由于换行造成的空白符所引起的。为了代码的美观，两个元素之间大多都是进行了换行的。

<body>
    <div class="divTest">
        <div class="divTest_one"></div>
        <div class="divTest_two"></div>
        <div class="divTest_three"></div>
    </div>
</body>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .divTest {
        /* border: 1px solid black; */
        width: 500px;
        height: 500px;
    }

    .divTest_one {
        height: 100px;
        width: 100px;
        background: red;
        display: inline-block;
    }

    .divTest_two {
        height: 100px;
        width: 100px;
        background: blue;
        display: inline-block;
    }

    .divTest_three {
        height: 100px;
        width: 100px;
        background: green;
    }
</style>

要处理这里的间隙呢，有多种方法，1.最简单的则是元素之间不换行，两个元素在一行书写，可以解决左右之间的间隙但是影响了代码的美观性，并且上下之间的间隙依旧存在。

<div class="divTest">
        <div class="divTest_one"></div><div class="divTest_two"></div><div class="divTest_three"></div>
</div>

2.其次是设置父元素的字体大小为0，上下左右的间隙都给解决了。

.divTest {
        /* border: 1px solid black; */
        width: 100%;
        height: 500px;
        overflow: hidden;
        font-size: 0;
 }

3.还有很多魔改解决方法，比如可以使用vertical-align:middle解决。这样可以解决上下的问题，但是左右的样式就更加的不美观。使用margin负值，绝对定位（没有什么是绝对定位解决不了的如果有那就算了）等等。

.divTest_one {
        height: 100px;
        width: 100px;
        background: red;
        display: inline-block;
        vertical-align: middle;
    }