使用inline-block元素并排时容器内出现异常间隙的问题

你遇到的间隙是inline-block元素的固有特性导致的：浏览器会把HTML代码中inline-block元素之间的换行、空格解析为空白字符，渲染成可见的间隙。

对比你和作者的代码，核心差异很明显：作者给包裹三个inline-block元素的.WrapMiddle容器设置了font-size: 0——空白字符的大小由父元素字体大小决定，设为0后，空白字符就不会占据空间，自然消除了间隙。而你的代码里，包裹aside和main的div没有这个设置，所以间隙就出现了。

几种解决办法 #

方法1：和作者用一样的思路，给父容器设置font-size: 0 #

给包裹aside和main的div加个类，设置字体大小为0，同时给内部元素恢复字体大小（如果需要显示文字的话）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <style>
      html,
      body {
        padding:0;
        margin:0;
       }

       header {
        width:100%;
        height:100px;
        background-color:red;
       }

       .content-container {
        height:700px;
        margin: 0 auto;
        font-size: 0; /* 关键：消除空白字符间隙 */
       }

       aside {
        width:29.71%;
        background-color: aqua;
        height:700px;
        display: inline-block;
        font-size: 16px; /* 恢复字体大小，按需调整 */
       }

       main {
        width:40%;
        height: 700px;
        background-color:pink;
        display: inline-block;
        font-size: 16px; /* 恢复字体大小，按需调整 */
       }

       footer {
        width:100%;
        height:200px;
        background-color:blue;
       }
    </style>
  </head>
  <body>
    <div class="Wrap">
       <header></header>
       <div class="content-container">
        <aside></aside>
        <main></main>
        <aside></aside>
       </div>
       <footer></footer>
    </div>
  </body>
</html>

方法2：去掉HTML中的换行/空格 #

把inline-block元素的代码写在同一行，去掉中间的空格和换行，让浏览器解析不到空白字符：

<div>
  <aside></aside><main></main><aside></aside>
</div>

这种方法不用改CSS，但代码可读性会差一些。

方法3：用Flex布局（更推荐的现代方案） #

直接替换成flex布局，完全不会有间隙问题，代码也更简洁：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <style>
      html,
      body {
        padding:0;
        margin:0;
       }

       header {
        width:100%;
        height:100px;
        background-color:red;
       }

       .content-container {
        height:700px;
        margin: 0 auto;
        display: flex; /* 启用flex布局 */
       }

       aside {
        flex: 0 0 29.71%; /* 等价于固定宽度29.71% */
        background-color: aqua;
       }

       main {
        flex: 0 0 40%; /* 等价于固定宽度40% */
        background-color:pink;
       }

       footer {
        width:100%;
        height:200px;
        background-color:blue;
       }
    </style>
  </head>
  <body>
    <div class="Wrap">
       <header></header>
       <div class="content-container">
        <aside></aside>
        <main></main>
        <aside></aside>
       </div>
       <footer></footer>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Diego Alves