使用flexbox在<div>中的额外空间

Question

我最近开始学习flexbox，现在尝试创建像画廊这样的图像网格。我的<div>包含大小为200x200px的图像，仅此而已。由于某些原因，图像下方的每个div中都有一个额外的空间。我的CSS和HTML如下。

HTML

<div class="content-container">
    <div class="content">
        <div class="content-item"><img src="../../pictures/1st.jpg"></div>
        <div class="content-item"><img src="../../pictures/2nd.jpg"></div>
        <div class="content-item"><img src="../../pictures/3rd.jpg"></div>
        <div class="content-item"><img src="../../pictures/4th.jpg"></div>
        <div class="content-item"><img src="../../pictures/5th.jpg"></div>
        <div class="content-item"><img src="../../pictures/6th.jpg"></div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

...

.content-container {
    display: flex;
    justify-content: center;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    width: 1000px;
}

.content-item {
border: 1px solid black;

}

在将display: flex添加到 .content-item 类之前，将有多余的空间。好吧，我想知道这是否是处理此问题的正确方法，以及为什么会这样。

我发现了这些主题1 2，所以我大概知道为什么，但是他们没有使用flexbox。