面试官的冷门考题：不常见但重要的 inline-block子元素间距问题详解前言在近期的一次前端开发面试中，我被问到了

前言

在近期的一次前端开发面试中，我被问到了一个冷门的面试题：有一个 div 宽高为 200px，内部有两个 div 宽为 100px。当子元素使用 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>Inline-block Layout</title>
    <style>
        body{
        margin: 0;
        padding: 0;
        }
        .container {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

得到结果紫色为父盒子container 宽高各200px 珊瑚色为子盒子box 宽高为各为100 在不添加任何样式的时候默认是块级元素所以上下排列，这里第一思路验证为正确

使用 `inline-block` 后子元素溢出并且不是左右排列

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
+       display: inline-block; /* 新增inline-block */
    }
</style>

可以发现在container 和 box 的宽高都没发生变化的时候，并且没有添加 margin 也没有添加border，只是设置了 inline-block; 元素之间出现了间距，顺着疑问接着往下看。

为什么使用 `inline-block` 后元素会出现间距

因为 inline-block 元素之间的空白字符（如空格、换行）会被渲染为空白间隙。这是由于 inline-block 元素的渲染方式与 inline 元素类似，空白字符会被视为元素之间的间距

MDN 文档解释

根据 MDN 文档，inline-block 元素之间的空白字符会被渲染为空白间隙。这是因为在 HTML 中，空白字符（如空格、换行）会被渲染为一个空格，而 inline-block 元素会保留这些空白字符。

了解 `inline-block` 渲染方式

inline-block 元素的渲染方式与 inline 元素类似，它们在同一行内排列，而不是像 block 元素那样独占一行。具体来说：

inline 元素：这些元素不会在前后产生换行，可以在一行内与其他 inline 或 inline-block 元素并排显示。常见的 inline 元素包括 <span>、<a> 等。
inline-block 元素：这些元素结合了 inline 和 block 元素的特性。它们可以在一行内并排显示，但同时可以设置宽度、高度、内边距和外边距等属性。

了解什么是空白字符

在 HTML 中，空白字符包括空格、换行、制表符等。这些字符在渲染时会被视为元素之间的间隙。具体来说：

空格：元素之间的空格会被渲染为一个空白间隙。
换行：元素之间的换行符也会被渲染为一个空白间隙。
制表符： Tab 制表符会被渲染为一个空白间隙。

经过以上内容，想必你已经对使用 inline-block 后元素出现间距有了一定的了解！！！

最后就是解决间距问题的方法推荐设置font-size

删除 HTML 中的空白字符

这种方法简单直接但是不建议使用，因为在编写代码的时候都有格式化，并且并不美观，可读性差

<div class="container">
    <div class="box">Box 1</div><div class="box">Box 2</div>
</div>

使用注释来消除空白字符

这种方法不建议使用，虽然保持了可读性，但是在复杂的布局中，注释可能会增加代码的维护难度

<div class="container">
    <div class="box">Box 1</div><!--注释
    --><div class="box">Box 2</div>
</div>

设置父元素的 font-size为0

推荐使用，先给父元素字体设为0，在手动给子元素设置字体大小，

<style>
    .container {
        font-size: 0;
    }
    .box {
        font-size: 16px; /* 恢复子元素的字体大小 */
    }
</style>
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

使用负外边距

不够灵活，可能会影响布局的其他部分，需要谨慎使用

<style>
    .box {
        margin-right: -2px; /* 负外边距 */
    }
</style>
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

使用浮动(float)

需要清除浮动,浮动元素会脱离文档流，可能会影响其他布局

<style>
    .box {
        float: left;
    }
</style>
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

使用font-size 完美解决效果图

结论

通过以上方法，我们可以有效解决 inline-block 元素之间的间距问题。每种方法都有其优缺点，选择合适的方法取决于具体的项目需求和开发环境。希望这些内容能帮助你更好地理解和应用 inline-block 布局，解决实际开发中的问题。

面试官的冷门考题：不常见但重要的 inline-block子元素间距问题详解

前言

使用 inline-block 后 子元素溢出 并且不是左右排列

为什么使用 inline-block 后元素会出现间距