面试题17：display:inline-block 什么时候会显示间隙？该怎么解决

最新推荐文章于 2024-07-25 11:52:08 发布

The..Fuir

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量2.7k

点赞数 7

分类专栏：面试 css html 文章标签： html css

本文链接：https://blog.csdn.net/qq_51066068/article/details/124375168

版权

面试同时被 3 个专栏收录

152 篇文章 48 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

面试官：display:inline-block 什么时候会显示间隙？该怎么解决

在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

display：inline；强制变成行内元素

display：block；强制变成块元素

而display：inline-block；顾名思义就是行内块的意思了，他具备了行内元素不换行的特征，同时也有块元素可以设置宽高的特征）

移除空格
使用margin负值
使用font-size：0
letter-spacing
word-spacing

一个是字符间距(`letter-spacing`)一个是单词间距(`word-spacing`)，大同小异。据我测试，`word-spacing`的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，`word-spacing`即使负值很大，也不会发生重叠。

现象描述

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
        }
        div .child1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div .child2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="child1">11111</div>
        <div class="child2">22222</div>
    </div>
</body>
</html>

第一种：移除空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
        }
        div .child1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div .child2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="child1">11111</div><div class="child2">22222</div>
    </div>
</body>
</html>

第二种：使用margin负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
        }
        div .child1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div .child2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-left: -5px;
        }
    </style>
</head>
<body>
    <div>
        <div class="child1">11111</div>
        <div class="child2">22222</div>
    </div>
</body>
</html>

第三种：使用font-size：0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            font-size: 0;
        }
        div .child1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div .child2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="child1">11111</div>
        <div class="child2">22222</div>
    </div>
</body>
</html>

第四种：letter-spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            letter-spacing: -5px;
        }
        div .child1{
            letter-spacing: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div .child2{
            letter-spacing: 0;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="child1">11111</div>
        <div class="child2">22222</div>
    </div>
</body>
</html>

第五种：word-spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            word-spacing: -5px;
        }
        div .child1{
            word-spacing: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div .child2{
            word-spacing: 0;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <div class="child1">11111</div>
        <div class="child2">22222</div>
    </div>
</body>
</html>

The..Fuir

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
面试题17：display:inline-block 什么时候会显示间隙？该怎么解决

面试官：display:inline-block 什么时候会显示间隙？该怎么解决在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。display：inline；强制变成行内元素display：block；强制变成块元素而display：inline-block；顾名思义就是行内块的意思了，他具.
复制链接

扫一扫