使用display:inline-block会产生什么问题？_display-inline-block会产生什么问题-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46179838/article/details/104339071

本文探讨了使用display:inline-block时遇到的元素间空白问题，分析了问题产生的原因，即HTML代码中的回车换行被浏览器处理为空白符导致。文章列举了三种解决方法，包括调整元素布局、设置父元素的font-size和使用float属性。同时，文中还提及了一些与display属性相关的注意点，如padding-bottom的计算依据、绝对定位子元素宽高的相对计算等。

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

一、问题

当我们写出两个方块盒子时，系统知道div是块级元素，会独占一行，所以这是我们就需要让块级元素变成行级块元素（使用两个display；inline-block;），但此时又会引发一个新的问题：元素放到一起会中间产生一段空白。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        .content{
            width:400px;
            height:200px;
            border:2px solid black;
        }
        .left{
            width:100px;
            height: 100px;
            background:#0ff;
            display:inline-block;
        }
        .right{
            width:100px;
            height:100px;
            background:#f0f;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>
</body>
</html>

效果图；
在这里插入图片描述
产生空白的原因：
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来 HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

二、解决方法

1、将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

<div class="content">
        <div class="left">
            左
        </div><div class="right">
            右
        </div>
    </div>

2、父元素中设置font-size: 0，在子元素上重置正确的font-size

.content{
            width:400px;
            height:200px;
            border:2px solid black;
            font-size:0;
        }
        .left{
            width:100px;
            height: 100px;
            background:#0ff;
            display:inline-block;
            font-size:14px; 
        }
        .right{
            width:100px;
            height:100px;
            background:#f0f;
            display:inline-block;
            font-size:14px;
        }

3、为子元素设置float:left；（所有的子元素）

         .left{
            float:left;
            width:100px;
            height: 100px;
            background:#0ff;
            display:inline-block;
        }
        .right{
            width:100px;
            height:100px;
            background:#f0f;
            display:inline-block;
            float:left;
         }