inline-bock间隙问题

最新推荐文章于 2020-11-16 15:49:18 发布

liuarmyliu

最新推荐文章于 2020-11-16 15:49:18 发布

阅读量113

点赞数

分类专栏：笔记前端文章标签： css html

本文链接：https://blog.csdn.net/liuarmyliu/article/details/108866539

版权

前端同时被 2 个专栏收录

65 篇文章 0 订阅

订阅专栏

笔记

34 篇文章 0 订阅

订阅专栏

当我们想让多个div标签排在同一水平线上时，我们一般第一时间想到的就是display:inline-block，但是此时每个div之间都有一定的间隙，这就是inline-block间隙问题，也有人叫换行符/空格间隙问题

举一个简单的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .test {
            width: 600px;
            border: 1px blue solid;
        }

        .test div {
            width: 100px;
            height: 100px;
            display: inline-block;
            background: blue;
        }
    </style>

</head>

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

</body>

</html>

在这里插入图片描述
那么如何解决这个问题：
1.将父元素的font-size设为0，子元素根据需求做出相应的调整

2.将div之间的换行给删除，就是写成下面这样

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;

        }

        .test {
            width: 600px;
            border: 1px blue solid;
            /* font-size: 0; */
        }

        .test div {
            width: 100px;
            height: 100px;
            display: inline-block;
            background: blue;
        }
    </style>

</head>

<body>
    <div class="test">
        <div></div><div></div><div></div><div></div><div style="width: 200px;height: 200px;"></div>
    </div>

</body>

</html>