inline-block布局产生间隙的原因及解决办法（水平、垂直）

最新推荐文章于 2024-05-12 14:58:21 发布

椰椰要努力

最新推荐文章于 2024-05-12 14:58:21 发布

阅读量1.9w

点赞数 8

分类专栏： HTML、CSS 文章标签：布局 display 间隙问题 css

本文链接：https://blog.csdn.net/gladys_1111/article/details/77279985

版权

HTML、CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block的空隙问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            padding: 20px;
        }
        .main{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="main"></div>
    <div class="main"></div>
</div>
</body>
</html>

页面效果：
这里写图片描述

原因：inline-block元素间有空格或是换行，因此产生了间隙。
解决办法：
1.空格符本质上就是个字符，与a,b,c,d这些字符是个同一个属性的东西，只是他是空格，透明的看不见而已（但可以选中）。所以，只要我们使用让文字宽度为0的那些方法，就可以解决inline-block元素间换行符间隙的问题。

{font-size:0;}

但是，这个方法在chrome浏览器下没有效果，在IE6/7下残留1像素间隙。

2.letter-spacing属性可以控制文字间的水平距离的，支持负值，可以让文字水平方向上重叠。
但是，基本上所有的浏览器对于不同字体下的空格符的水平占据的解析都是一致，唯一有瑕疵的是在Opera浏览器下，两个inline-block元素间空白间隙使用letter-spacing去除的极限是1像素，当看上去要正好为0的时候，letter-spacing似乎失效，空白间距恢复成letter-spacing:0时的效果。

现在主要情况如下：

block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。
~
~
~
~
~
~
~
~
~
将两个解决办法综合，就是一个完美的解决办法：
给上述代码的父级块.box元素设置如下：

.box {
    font-size: 0;
    letter-spacing: -3px;
}

页面效果：
这里写图片描述

如果使用的是IE6/7浏览器，可能会看到图片重叠了2像素，这是1像素文字间隙-3像素letter-spacing值的结果。但是，实际情况下，列表元素都是从block元素inline-block化的，元素间本身就没有间隙的，所以，就不会有重叠的问题了。

总结：应用display:inline-block属性实现列表布局的几个关键字就是：block水平的标签，font-size:0和letter-spacing负值。（不过，最新版本的chrome对font-size:0;去除间隙是有效的，但本着兼容大多浏览器，最好还是选择两者都写的方式吧。）

补充：
有时候inline-block还会遇到顶部不在一个基准线的情况（垂直方向上产生的间隙），解决办法：在每一个子元素上加一个属性：vertical-align:top;(或者值是bottom，要看具体实现的效果了，想让顶部对齐就top，想让底部对齐就bottom)

椰椰要努力

关注

8
点赞
踩
36

收藏

觉得还不错? 一键收藏
4
评论
inline-block布局产生间隙的原因及解决办法（水平、垂直）

布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
复制链接

扫一扫