欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2024-02-19 08:36:30
...

解决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>

使用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
}

.divContainer {
    width: 200px;
    height: 100px;
    border: 1px solid blue;
    background-color: #fff;
}
<body>
    <div class="divContainer">
        <div></div>
        <div></div>
    </div>
</body>

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

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

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

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

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

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

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

相关标签： display:inline-block inline-block间隙问题 display间隙问题

上一篇： url链接后面拼接对象参数

下一篇： CSS - dispaly:inline-block

推荐阅读