使用display: inline-block的间隙问题

最新推荐文章于 2023-02-24 23:45:31 发布

做一个快乐的肥仔

最新推荐文章于 2023-02-24 23:45:31 发布

阅读量721

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： display:inline-block inline-block间隙问题 display间隙问题

本文链接：https://blog.youkuaiyun.com/qq_34874517/article/details/81332535

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决使用display:inline-block布局时元素间出现间距的方法。通过设置容器font-size为0，可以有效消除间距，并展示了实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决display: inline-block 下元素之间有间距的问题

在某种情况下 , 不想使用浮动方法 , 又要考虑兼容的情况下。通常我们会使用 display: inline-block 来使元素处于并排显示, 会遇上这样的情况

* {
    padding: 0px;
    margin: 0px;
}

body {
    padding-top: 100px;
    padding-left: 100px;

}

div {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #ccc
}

<body>
    <div></div>
    <div></div>
</body>

红色圈住的地方就有空隙, 一般情况下倒是没有什么 , 但如果外层的容器固定宽度且要并排显示的时候 , 就会出现这样的情况

* {
    padding: 0px;
    margin: 0px;
}

body {
    padding-top: 100px;
    padding-left: 100px;

}

div {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #ccc
}

.divContainer {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    background-color: #fff;
}

<body>
    <div class="divContainer">
        <div></div>
        <div></div>
    </div>
</body>

原因是因为折行也被编译器认为是一个字符(相当于一个空格), 解决的办法也有:

给装载 div 容器的样式赋值一个 font-size:0px 就可以解决了

.divContainer {
     width: 200px;
     height: 100px;
     border: 1px solid blue;
     background-color: #fff;
     font-size: 0px;
}

为了方便区分我给这两个div 修改了一下颜色, 唯一的缺点就是需要给这些div 写字体大小 font-size

使用display: inline-block的间隙问题

解决display: inline-block 下 元素之间有间距的问题

给 装载 div 容器的 样式 赋值一个 font-size:0px 就可以解决了

否则子元素div 的字是无法显示的

解决display: inline-block 下元素之间有间距的问题

给装载 div 容器的样式赋值一个 font-size:0px 就可以解决了