方块之间的微小空间是什么？

Question

我尝试制作一个简单的块结构来可视化“display: inline-block;”是如何工作的财产。我有一个问题：块之间看起来像边界的小空间是什么，我 没设置？为什么会出现？

 h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        margin-top: 0;
        font-weight: 100;
    }
    
    .container {
        background-color: rgba(12, 14, 24, 0.82);
    }
    
    .yellow {
        background-color: rgba(255, 251, 2, 0.82);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .pink {
        background-color: rgba(236, 2, 157, 0.68);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .cyan {
        background-color: cyan;
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }

  <div class="container">
    <div class="yellow">
        <h1>1</h1>
    </div>
    <div class="pink">
        <h1>2</h1>
    </div>
    <div class="cyan">
        <h1>3</h1>
    </div>
  </div>

我试图在 Discord 社区中询问它，但没有人能给我一个正确的解释......

Answer 1

body{
  margin:0;
  padding:0;
  box-sizing: border-box;
} 
h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        margin-top: 0;
        font-weight: 100;
    }
    
    .container {
        display:flex;
        background-color: rgba(12, 14, 24, 0.82);
    }
    
    .yellow {
        background-color: rgba(255, 251, 2, 0.82);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .pink {
        background-color: rgba(236, 2, 157, 0.68);
        height: 300px;
        width: 10%;
        display: inline-block;
        
    }
    
    .cyan {
        background-color: cyan;
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }

<div class="container">
    <div class="yellow">
        <h1>1</h1>
    </div>
    <div class="pink">
        <h1>2</h1>
    </div>
    <div class="cyan">
        <h1>3</h1>
    </div>
  </div>